diff --git a/mindinsight/ui/src/components/search-select.vue b/mindinsight/ui/src/components/search-select.vue
index 485f22bd..dafa2ef3 100644
--- a/mindinsight/ui/src/components/search-select.vue
+++ b/mindinsight/ui/src/components/search-select.vue
@@ -110,7 +110,7 @@ limitations under the License.
  * The PublicStore holds the key of focused selector
  * When there is more than two component in same page, help selector to keep correct display
  */
-const PublicStore = {activeKey: {key: ''}};
+const PublicStore = { activeKey: { key: '' } };
 export default {
   props: {
     multiple: {
@@ -215,8 +215,11 @@ export default {
      * The logic of click event that add to window, which can make response to defocus
      */
     clickHandler() {
-      this.ifFocus = false;
-      this.ifActive = false;
+      if (this.ifFocus) {
+        this.ifFocus = false;
+        this.ifActive = false;
+        this.$emit('selectBlur');
+      }
     },
     /**
      * The logic of click the selector, including everywhere
@@ -310,9 +313,14 @@ export default {
      * @param {Number} index
      */
     mulDeselectOption(option, index) {
-      const indexTemp = this.indexes.indexOf(index);
-      this.indexes.splice(indexTemp, 1);
-      option.selected = false;
+      return new Promise((resolve) => {
+        const indexTemp = this.indexes.indexOf(index);
+        this.indexes.splice(indexTemp, 1);
+        option.selected = false;
+        this.$nextTick(() => {
+          resolve(true);
+        });
+      });
     },
     /**
      * The logic of select option when multiple is true
@@ -361,7 +369,11 @@ export default {
     cancelLabel(event, index) {
       event.stopPropagation();
       event.preventDefault();
-      this.mulDeselectOption(this.options[index], index);
+      this.mulDeselectOption(this.options[index], index).then(() => {
+        if (!this.ifActive) {
+          this.$emit('cancelLabel');
+        }
+      });
     },
   },
   created() {
@@ -411,7 +423,7 @@ export default {
       }, this.filterDebounce);
     },
     // The watcher of source can process asynchronous data input, or make response when original data changed
-    'source': {
+    source: {
       handler(newVal) {
         this.indexes = [];
         this.options = this.processData(newVal);
@@ -427,7 +439,7 @@ export default {
         }
       },
     },
-    'indexes': {
+    indexes: {
       handler() {
         this.$nextTick(() => {
           this.$emit('selectedUpdate', this.calValues());
@@ -558,16 +570,29 @@ export default {
 .cl-search-select .select-container .option-container .select-option:hover {
   background-color: #f5f7fa;
 }
-.cl-search-select .select-container .option-container .select-option .label-container {
+.cl-search-select
+  .select-container
+  .option-container
+  .select-option
+  .label-container {
   white-space: nowrap;
   max-width: 320px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.cl-search-select .select-container .option-container .select-option .icon-container {
+.cl-search-select
+  .select-container
+  .option-container
+  .select-option
+  .icon-container {
   width: 14px;
 }
-.cl-search-select .select-container .option-container .select-option .icon-container .icon-no-selected {
+.cl-search-select
+  .select-container
+  .option-container
+  .select-option
+  .icon-container
+  .icon-no-selected {
   display: none;
 }
 .cl-search-select .select-container .option-container .is-selected {
@@ -591,7 +616,9 @@ export default {
   -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
   background-color: #e8e8e8;
 }
-.cl-search-select .select-container .option-container::-webkit-scrollbar-thumb:hover {
+.cl-search-select
+  .select-container
+  .option-container::-webkit-scrollbar-thumb:hover {
   -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
   background-color: #cacaca;
   border-radius: 3px;
diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 14e16fe2..5ed1a31c 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -23,7 +23,8 @@
     "deselectAll": "Clear",
     "dataLoading": "Loading data...",
     "notice": "Information",
-    "caseMode": "Not case sensitive"
+    "caseMode": "Not case sensitive",
+    "all": "All"
   },
   "symbols": {
     "leftbracket": "(",
@@ -799,24 +800,34 @@
     "explainSummaryCurrentFolder": "Root path of the explanation log:",
     "summaryPath": "Explanation Log Path",
     "title": "Saliency Map Visualization",
+    "conterfactualInterpretation": "Counterfactual Explanation",
     "explainMethod": "Explanation Methods",
     "viewScore": "View Score",
     "fetch": "Filter",
     "minConfidence": "Probability Threshold",
+    "confidenceRange": "Probability and Range",
     "imgSort": "Sort Images By",
     "default": "Default",
     "byProbability": "Probabilities in descending order",
+    "byUncertainty": "Uncertainties in descending order",
+    "uncertainty": "uncertainty",
     "superposeImg": "Overlay on Original Image",
     "originalPicture": "Original Image",
     "forecastTag": "Prediction Tag",
+    "forecastTagPosibility": "Prediction Tag (Probability)",
     "tag": "Tag",
-    "tagTip": "Query the image data that contains any filter label",
+    "filterImg": "Filter Image",
+    "tagTip": "Query image data that contains any filter tag",
+    "typeTip": "Query image data that contains any prediction type",
     "confidence": "Probability",
-    "forecastTagTip": "When the inference image has the correct tag, the following four flags are displayed in the tag row",
+    "forecastTagTip": "When the inference image has the correct tag, the following three 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;",
     "FN": "FN, indicates false negative. The tag is a positive sample, and the classification is a negative sample;",
     "FP": "FP, indicates false positive. The tag is a negative sample, and the classification is a positive sample;",
     "TN": "TN, Indicates true negative. The tag is a negative sample, and the classification is a negative sample;",
+    "coverfactualInterpretation": "Mask-based Counterfactual Explanation",
+    "viewExplanation": "View Explanation",
+    "maskingProcess": "Layer-by-layer Masking Process",
     "mainTipTitle": "Function description:",
     "mainTipPartOne": "This function visualizes the basis for model classification. After the to-be-explained model, the image, and the tag are selected, a contribution degree of each pixel in the original image to the selected tag is calculated by using an explanation method, and visualization is performed by using a saliency map similar to a heatmap. A brighter color indicates that the corresponding area contributes more to the selected tag of the model prediction. The darker the color, the smaller the contribution of the area to the selected tag.",
     "mainTipPartTwo": "A saliency map helps you understand the features related to the specified tag during deep neural network inference. When the inference basis and expectation of a model are different, you can debug the model by referring to the saliency map so that the model can perform inference based on proper features.",
@@ -824,7 +835,13 @@
     "mainTipPartFour": "https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9050829",
     "noExplainer": "Select Explanation Method",
     "minConfidenceTip": "Probability threshold of a prediction tag. A tag is recorded as a prediction tag if its output probability is greater than the threshold.",
-    "noData": "Loading data, please refresh the page later"
+    "noData": "Loading data... Refresh the page later",
+    "predictionType": "Prediction Type",
+    "disableSaliencyMapTip": "Failed to view saliency map visualization because no saliency map log is available.",
+    "disableHOCTip": "Failed to view counterfactual explanation because no counterfactual explanation log is available.",
+    "hocMinConfidenceTip": "Display and explain the labels whose prediction probability is greater than the prediction threshold",
+    "imageList": "Picture list",
+    "hocTitleTip": "Gradually shrink the display range to find the minimum display area where the prediction probability is greater than the threshold"
   },
   "metric": {
     "scoreSystem": "Scoring System",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 9a394b38..8860b26a 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -23,7 +23,8 @@
     "deselectAll": "取消全选",
     "dataLoading": "数据加载中",
     "notice": "提示",
-    "caseMode": "不区分大小写"
+    "caseMode": "不区分大小写",
+    "all": "全部"
   },
   "symbols": {
     "leftbracket": "（",
@@ -795,24 +796,34 @@
     "explainSummaryCurrentFolder": "解释日志根路径：",
     "summaryPath": "解释日志路径",
     "title": "显著图可视化",
+    "conterfactualInterpretation": "反事实解释",
     "explainMethod": "解释方法",
     "viewScore": "查看评分",
     "fetch": "筛选",
     "minConfidence": "概率阈值",
+    "confidenceRange": "概率（区间）",
     "imgSort": "图片排序",
     "default": "默认",
     "byProbability": "概率值降序",
+    "byUncertainty": "不确定性值降序",
+    "uncertainty": "不确定性",
     "superposeImg": "叠加于原图",
     "originalPicture": "原始图片",
     "forecastTag": "预测标签",
+    "forecastTagPosibility": "预测标签 (概率)",
     "tag": "标签",
+    "filterImg": "图片筛选",
     "tagTip": "查询包含任一筛选标签的图片数据",
+    "typeTip": "查询包含任一预测类型的图片数据",
     "confidence": "概率",
-    "forecastTagTip": "当推理图片带有正确标签时，标签行会显示下列四种旗标",
+    "forecastTagTip": "当推理图片带有正确标签时，标签行会显示下列三种旗标",
     "TP": "TP，代表Ture Positive，标签为正样本，分类为正样本；",
     "FN": "FN，代表False Negative，标签为正样本，分类为负样本；",
-    "FP": "FP，代表Fasle Positive，标签为负样本，分类为正样本；",
+    "FP": "FP，代表False Positive，标签为负样本，分类为正样本；",
     "TN": "TN，代表Ture Negative，标签为负样本，分类为负样本；",
+    "coverfactualInterpretation": "遮掩反事实解释",
+    "viewExplanation": "查看解释",
+    "maskingProcess": "逐层遮掩过程",
     "mainTipTitle": "功能说明:",
     "mainTipPartOne": "本功能对模型分类的依据进行可视化。选定待解释模型、图片和标签后，解释方法计算得到原始图像中每个像素对选定标签的贡献度，以类似热力图的显著图进行可视。显著图颜色越亮，表示对应区域对于模型预测选定标签的贡献越多；颜色越暗，该区域对选定标签的贡献越小。",
     "mainTipPartTwo": "显著图可以帮助我们了解深度神经网络推理时，和指定标签有关系的特征。当模型推理依据和期望不同时，可以参考显著图对模型进行调试，让模型依据合理的特征进行推理。",
@@ -820,7 +831,13 @@
     "mainTipPartFour": "https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9050829",
     "noExplainer": "请选择解释方法",
     "minConfidenceTip": "预测标签的概率阈值，当一个标签的输出概率大于阈值时就会被记为预测标签。",
-    "noData": "数据正在加载，请稍后刷新页面"
+    "noData": "数据正在加载，请稍后刷新页面",
+    "predictionType": "预测类型",
+    "disableSaliencyMapTip": "无显著图可视日志，无法查看",
+    "disableHOCTip": "无反事实解释日志，无法查看",
+    "hocMinConfidenceTip": "对预测概率大于预测阈值的标签进行显示解释",
+    "imageList": "图片列表",
+    "hocTitleTip": "逐步收缩显示范围，以寻找出预测概率大于阈值的最小显示区域"
   },
   "metric": {
     "scoreSystem": "评分体系",
diff --git a/mindinsight/ui/src/main.js b/mindinsight/ui/src/main.js
index ccfbb655..051a3e90 100644
--- a/mindinsight/ui/src/main.js
+++ b/mindinsight/ui/src/main.js
@@ -29,10 +29,23 @@ import {basePath} from '@/services/fetcher';
 
 let language = window.localStorage.getItem('milang');
 const languageList = ['zh-cn', 'en-us'];
-if (!language || !languageList.includes(language)) {
-  language = languageList[1];
+if (!language) {
+  let tempLang = navigator.language || navigator.userLanguage;
+  tempLang = tempLang.substr(0, 2);
+  if (tempLang === 'zh') {
+    language = languageList[0];
+  } else {
+    language = languageList[1];
+  }
   window.localStorage.setItem('milang', language);
+} else {
+  if (!languageList.includes(language)) {
+    // set English if no default language
+    language = languageList[1];
+    window.localStorage.setItem('milang', language);
+  }
 }
+store.commit('setLanguage', language);
 
 if (language !== languageList[0]) {
   Vue.use(ElementUI, {locale});
diff --git a/mindinsight/ui/src/router.js b/mindinsight/ui/src/router.js
index a162cad9..505a602c 100644
--- a/mindinsight/ui/src/router.js
+++ b/mindinsight/ui/src/router.js
@@ -139,8 +139,12 @@ export default new Router({
     },
     {
       path: '/explain/saliency-map',
+      component: () => import('./views/explain/saliency-map.vue'),
+    },
+    {
+      path: '/explain/conterfactual-interpretation',
       component: () =>
-        import('./views/explain/saliency-map.vue'),
+        import('./views/explain/conterfactual-interpretation.vue'),
     },
     {
       path: '/explain/xai-metric',
diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js
index b5977d67..72a04c02 100644
--- a/mindinsight/ui/src/services/request-service.js
+++ b/mindinsight/ui/src/services/request-service.js
@@ -440,6 +440,13 @@ export default {
       params: params,
     });
   },
+  queryHOCData(params) {
+    return axios({
+      method: 'post',
+      url: 'v1/mindinsight/explainer/hoc',
+      data: params,
+    });
+  },
   tensorHitsData(params) {
     return axios({
       method: 'get',
diff --git a/mindinsight/ui/src/store.js b/mindinsight/ui/src/store.js
index 50fdaebe..9b76afc6 100644
--- a/mindinsight/ui/src/store.js
+++ b/mindinsight/ui/src/store.js
@@ -40,6 +40,8 @@ export default new Vuex.Store({
     // Echart column selected by model traceability box
     selectedBarList: [],
     customizedColumnOptions: [],
+    // Current language
+    language: 'en-us',
   },
   mutations: {
     // set cancelTokenArr
@@ -87,6 +89,9 @@ export default new Vuex.Store({
     componentsNum(state) {
       state.componentsCount++;
     },
+    setLanguage(state, val) {
+      state.language = val;
+    },
   },
   actions: {},
 });
diff --git a/mindinsight/ui/src/views/explain/conterfactual-interpretation.vue b/mindinsight/ui/src/views/explain/conterfactual-interpretation.vue
new file mode 100644
index 00000000..26baef08
--- /dev/null
+++ b/mindinsight/ui/src/views/explain/conterfactual-interpretation.vue
@@ -0,0 +1,917 @@
+<!--
+Copyright 2021 Huawei Technologies Co., Ltd.All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <div class="cl-hoc">
+    <div class="cl-hoc-container">
+      <div class="cl-hoc-title cl-hoc-tip-container">
+        {{$t('explain.coverfactualInterpretation')}}
+        <el-tooltip placement="right-start"
+                    effect="light">
+          <div slot="content"
+               class="tooltip-container">
+            <div class="tip-text">
+              {{$t('explain.hocTitleTip')}}
+            </div>
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </div>
+      <div class="cl-hoc-con">
+        <div class="cl-hoc-left">
+          <!-- Top Bar -->
+          <div class="cl-left-top-container">
+            <div class="hoc-title-container left-title">
+              {{$t('explain.imageList')}}
+            </div>
+            <!-- Selecting a hoc image -->
+            <div class="hoc-filter-container">
+              <div class="title-text">{{$t('explain.tag')}}</div>
+              <div class="select-options">
+                <el-select v-model="curFilterLabel"
+                           :placeholder="$t('public.select')"
+                           @change="filterLabelChange"
+                           size="small">
+                  <el-option v-for="item in labelLlist"
+                             :key="item.label"
+                             :label="item.label"
+                             :value="item.label"></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="hoc-filter-container">
+              <div class="title-text">{{$t('explain.imgSort')}}</div>
+              <div class="select-options">
+                <el-select v-model="pageData.sortName"
+                           :placeholder="$t('public.select')"
+                           size="small">
+                  <el-option v-for="item in sortOption"
+                             :key="item.value"
+                             :label="item.label"
+                             :value="item.value"></el-option>
+                </el-select>
+              </div>
+            </div>
+          </div>
+          <!-- Thumbnail bar -->
+          <div class="cl-left-middle-container">
+            <div class="cl-left-thumb"
+                 v-if="!pageData.totalNum || !initOver">
+              <!-- No data -->
+              <div class="image-noData">
+                <div>
+                  <img :src="require('@/assets/images/nodata.png')"
+                       alt="" />
+                </div>
+                <div v-if="initOver"
+                     class="noData-text">{{$t("public.noData")}}</div>
+                <div v-else
+                     class="noData-text">{{$t("public.dataLoading")}}</div>
+              </div>
+            </div>
+            <div class="cl-left-thumb"
+                 v-else>
+              <div class="cl-left-thumb-item"
+                   v-for="(data, index) in fullData"
+                   :key="data.id"
+                   :class="index === curSelectedDataIndex ? 'active' : ''"
+                   @click="dataSelect(index)">
+                <img :src="formateUrl(data.image)">
+              </div>
+            </div>
+            <!-- pagination -->
+            <div class="cl-left-page">
+              <el-pagination layout="prev, pager ,next, jumper"
+                             :total="pageData.totalNum"
+                             :current-page="pageData.curPage"
+                             :pager-count="5"
+                             :page-size="pageData.pageSize"
+                             @current-change="pageChange"></el-pagination>
+            </div>
+          </div>
+        </div>
+        <div class="cl-hoc-right">
+          <div class="cl-right-top">
+            <div class="cl-right-top-item left-item">
+              <!-- Original image label selection bar -->
+              <div class="cl-right-title">
+                <div class="hoc-title-container ori-image-title">
+                  {{$t('explain.originalPicture')}}
+                </div>
+                <div class="ori-tag-select-container">
+                  <div class="ori-select-title"
+                       :title="$t('explain.forecastTagPosibility')">
+                    {{$t('explain.forecastTagPosibility')}}
+                  </div>
+                  <div class="cl-left-options">
+                    <el-select v-model="curImageData.selectedLabel"
+                               :placeholder="$t('public.select')"
+                               size="small"
+                               @change="selectLableChange">
+                      <el-option v-for="item in curImageData.labels"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                  </div>
+                </div>
+              </div>
+              <!-- Original image -->
+              <div class="ori-image-container">
+                <img v-if="curImageData.src"
+                     :src="formateUrl(curImageData.src)">
+                <div class="image-noData"
+                     v-else>
+                  <div>
+                    <img :src="require('@/assets/images/nodata.png')"
+                         alt="" />
+                  </div>
+                  <div v-if="initOver"
+                       class="noData-text">{{$t("public.noData")}}</div>
+                  <div v-else
+                       class="noData-text">{{$t("public.dataLoading")}}</div>
+                </div>
+              </div>
+            </div>
+            <div class="cl-right-top-item">
+              <div class="cl-right-title">
+                <div class="hoc-title-container">{{$t('explain.viewExplanation')}}</div>
+                <div class="cl-right-title-silde">
+                  <div class="cl-right-title-label cl-hoc-tip-container">
+                    {{ $t('explain.minConfidence') }}
+                    <el-tooltip placement="bottom-start"
+                                effect="light">
+                      <div slot="content">
+                        {{ $t('explain.hocMinConfidenceTip') }}
+                      </div>
+                      <i class="el-icon-info"></i>
+                    </el-tooltip>
+                    <span>{{ $t('symbols.colon') }}</span>
+                    <span>{{ minConfidence }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="cl-right-con">
+                <div class="img-container">
+                  <img v-if="curImageData.curSampleData.hoc_layers && curImageData.curSampleData.hoc_layers.length"
+                       :src="formateUrl(curImageData.curSampleData.hoc_layers[curImageData.imageIndex].outcome)"
+                       alt="">
+                  <div class="image-noData"
+                       v-else>
+                    <div>
+                      <img :src="require('@/assets/images/nodata.png')"
+                           alt="" />
+                    </div>
+                    <div v-if="initOver"
+                         class="noData-text">{{$t("public.noData")}}</div>
+                    <div v-else
+                         class="noData-text">{{$t("public.dataLoading")}}</div>
+                  </div>
+                </div>
+                <div class="image-title"
+                     v-if="curImageData.curSampleData.hoc_layers && curImageData.curSampleData.hoc_layers.length">
+                  {{curImageData.curSampleData.label}}
+                  {{$t('symbols.leftbracket')}}
+                  {{curImageData.curSampleData.hoc_layers[curImageData.imageIndex].confidence.toFixed(3)}}
+                  {{$t('symbols.rightbracket')}}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="cl-right-footer"
+               ref="foot">
+            <div class="cl-right-footer-info hoc-title-container">
+              {{$t('explain.maskingProcess')}}
+            </div>
+            <div class="cl-right-footer-con">
+              <div class="cl-right-arrowCon"
+                   ref="sampleContainer">
+                <div class="cl-right-footer-marquee"
+                     v-if="curImageData.curSampleData.hoc_layers && curImageData.curSampleData.hoc_layers.length">
+                  <div class="cl-right-footer-item"
+                       v-for="(sample, index) in curImageData.curSampleData.hoc_layers"
+                       :key="index">
+                    <div class="cl-right-footer-image"
+                         :style="{width: (widthBase * 2) + 'px'}"
+                         @click="jumpImage(index)">
+                      <div class="image-container"
+                           :class="[curImageData.imageIndex===index ? 'itemActive':'']">
+                        <img :src="formateUrl(sample.outcome)"
+                             alt="">
+                      </div>
+                      <div class="cl-right-footer-title">
+                        {{curImageData.curSampleData.label}}
+                        {{$t('symbols.leftbracket')}}
+                        {{sample.confidence.toFixed(3)}}
+                        {{$t('symbols.rightbracket')}}
+                      </div>
+                    </div>
+                    <div class="cl-right-footer-arrow"
+                         :style="{width: widthBase + 'px'}"
+                         v-if="index!==curImageData.curSampleData.hoc_layers.length-1">
+                      <i class="el-icon-right"></i>
+                    </div>
+                  </div>
+                </div>
+                <!-- No data -->
+                <div class="image-noData"
+                     v-else>
+                  <div>
+                    <img :src="require('@/assets/images/nodata.png')"
+                         alt="" />
+                  </div>
+                  <div v-if="initOver"
+                       class="noData-text">{{$t("public.noData")}}</div>
+                  <div v-else
+                       class="noData-text">{{$t("public.dataLoading")}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import RequestService from '../../services/request-service';
+import {basePath} from '@/services/fetcher';
+
+export default {
+  data() {
+    return {
+      trainId: this.$route.query.id, // Train id
+      initOver: false, // Initialization completion flag
+      // Sorting mode
+      sortOption: [
+        {
+          label: 'confidence',
+          value: 'confidence',
+        },
+      ],
+      // Pagination data
+      pageData: {
+        curPage: 1,
+        totalNum: 0,
+        pageSize: 24,
+        pageSizes: [24],
+        sortName: 'confidence',
+        sortType: 'descending',
+      },
+      // Prediction tag of the current image
+      labelLlist: [],
+      // All tags
+      emptyLabelSelect: {
+        id: -1,
+        label: this.$t('public.all'),
+      },
+      curFilterLabel: this.$t('public.all'), // Current filter label
+      resizeTimer: null, // Timer for changing the window size
+      widthBase: 150, // Foundation width
+      textHeight: 30, // Text height
+      partBase: 2, // Number of basic block
+      minConfidence: '', // Probability threshold
+      fullData: [], // Full data on current page
+      curSelectedDataIndex: 0, // Current selected data subscript
+      // Information about the selected data
+      curImageData: {
+        src: '',
+        labels: [],
+        selectedLabel: '',
+        oriData: {},
+        imageIndex: 0,
+        curSampleData: {},
+      },
+      dataWaitCount: 2, // Number of waiting times when no data is available
+      dataWaitTimer: null, // No data available timer
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getHOCData();
+  },
+  mounted() {
+    if (!this.trainId) {
+      this.$message.error(this.$t('trainingDashboard.invalidId'));
+      document.title = `${this.$t(
+          'explain.conterfactualInterpretation',
+      )}-MindInsight`;
+      return;
+    }
+    document.title = `${this.$t(
+        'explain.conterfactualInterpretation',
+    )}-MindInsight`;
+
+    window.addEventListener('resize', this.resizeCallback, false);
+    this.$nextTick(() => {
+      this.resizeCallback();
+    });
+  },
+  destroyed() {
+    // Remove the listener of window size change
+    window.removeEventListener('resize', this.resizeCallback);
+    // Remove timer
+    if (this.dataWaitTimer) {
+      clearTimeout(this.dataWaitTimer);
+      this.dataWaitTimer = null;
+    }
+  },
+  methods: {
+    /**
+     * Obtains explanation job meta information
+     */
+    getMetaData() {
+      const params = {
+        train_id: this.trainId,
+      };
+      RequestService.queryTrainInfo(params).then(
+          (res) => {
+            if (
+              !res ||
+            !res.data ||
+            !res.data.classes ||
+            !res.data.classes.length ||
+            !res.data.saliency
+            ) {
+              return;
+            }
+            this.labelLlist = [this.emptyLabelSelect].concat(res.data.classes);
+            this.minConfidence = res.data.saliency.min_confidence;
+          },
+      );
+    },
+
+    /**
+     * Obtains HOC data
+     */
+    getHOCData() {
+      const params = {
+        train_id: this.trainId,
+        limit: this.pageData.pageSize,
+        offset: this.pageData.curPage - 1,
+        sorted_name: this.pageData.sortName,
+        sorted_type: this.pageData.sortType,
+      };
+      if (this.curFilterLabel !== this.$t('public.all')) {
+        params.labels = [this.curFilterLabel];
+      }
+      RequestService.queryHOCData(params).then(
+          (res) => {
+            if (!res || !res.data) {
+              this.initOver = true;
+              return;
+            }
+            if (!res.data.count && !this.initOver && this.dataWaitCount) {
+              this.dataWaitCount--;
+              if (this.dataWaitTimer) {
+                clearTimeout(this.dataWaitTimer);
+                this.dataWaitTimer = null;
+              }
+              this.dataWaitTimer = setTimeout(() => {
+                this.getHOCData();
+              }, 1500);
+            } else {
+              if (!this.initOver) {
+                this.getMetaData();
+              }
+              this.initOver = true;
+              this.pageData.totalNum = res.data.count;
+              this.fullData = res.data.samples;
+              this.curSelectedDataIndex = 0;
+              this.formateCurrentHOCData();
+            }
+          },
+          () => {
+            this.pageData.totalNum = 0;
+            this.initOver = true;
+            this.resetIniitData();
+          },
+      );
+    },
+    /**
+     * Initializes and loads selected HOC data
+     */
+    formateCurrentHOCData() {
+      const curData = this.fullData[this.curSelectedDataIndex];
+      if (!curData) {
+        this.resetIniitData();
+        return;
+      }
+      const labelOptions = [];
+      curData.inferences.forEach((inference, index) => {
+        const label = `${inference.label}${this.$t(
+            'symbols.leftbracket',
+        )}${inference.confidence.toFixed(3)}${this.$t('symbols.rightbracket')}`;
+        labelOptions.push({
+          label: label,
+          value: index,
+        });
+      });
+      this.curImageData.src = curData.image;
+      this.curImageData.labels = labelOptions;
+      this.curImageData.oriData = curData;
+      if (labelOptions.length) {
+        this.curImageData.selectedLabel = labelOptions[0].value;
+        this.curImageData.curSampleData = this.curImageData.oriData.inferences[
+            this.curImageData.selectedLabel
+        ];
+      } else {
+        this.curImageData.selectedLabel = '';
+        this.curImageData.curSampleData = {};
+      }
+      if (
+        this.curImageData.curSampleData.hoc_layers &&
+        this.curImageData.curSampleData.hoc_layers.length
+      ) {
+        this.curImageData.imageIndex =
+          this.curImageData.curSampleData.hoc_layers.length - 1;
+      } else {
+        this.curImageData.imageIndex = 0;
+      }
+    },
+
+    /**
+     * Page number change
+     * @param {Number} page Page number after change
+     */
+    pageChange(page) {
+      this.pageData.curPage = page;
+      this.getHOCData();
+    },
+
+    /**
+     * Selected data change
+     * @param {Number} index Selected data subscript
+     */
+    dataSelect(index) {
+      this.curSelectedDataIndex = index;
+      this.formateCurrentHOCData();
+    },
+
+    /**
+     * The images label is changed
+     * @param {Number} value Selected label subscript
+     */
+    selectLableChange(value) {
+      this.curImageData.selectedLabel = value;
+      this.curImageData.curSampleData = this.curImageData.oriData.inferences[
+          value
+      ];
+      if (
+        this.curImageData.curSampleData.hoc_layers &&
+        this.curImageData.curSampleData.hoc_layers.length
+      ) {
+        this.curImageData.imageIndex =
+          this.curImageData.curSampleData.hoc_layers.length - 1;
+      } else {
+        this.curImageData.imageIndex = 0;
+      }
+    },
+
+    /**
+     *Jump image
+     * @param {Number} index Selected image subscript
+     */
+    jumpImage(index) {
+      this.curImageData.imageIndex = index;
+    },
+
+    /**
+     * Resize callback
+     */
+    resizeCallback() {
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = null;
+      }
+      this.resizeTimer = setTimeout(() => {
+        const sampleContainer = this.$refs.sampleContainer;
+        if (sampleContainer) {
+          this.widthBase =
+            (sampleContainer.clientHeight - this.textHeight) / this.partBase;
+        }
+      }, 300);
+    },
+    /**
+     * Concatenate a valid URL
+     * @param {String} url
+     * @return {String} Concatenated character string
+     */
+    formateUrl(url) {
+      if (!url) {
+        return '';
+      }
+      const newURL = `${basePath}${url}&date=${new Date().getTime()}`;
+      return newURL.replace(/(?<!:)\/\//g, '/');
+    },
+    /**
+     * Filter label change
+     */
+    filterLabelChange() {
+      this.pageData.curPage = 1;
+      this.getHOCData();
+    },
+    /**
+     * Reset initial data
+     */
+    resetIniitData() {
+      this.curImageData = {
+        src: '',
+        labels: [],
+        selectedLabel: '',
+        oriData: {},
+        imageIndex: 0,
+        curSampleData: {},
+      };
+    },
+  },
+};
+</script>
+<style>
+.cl-hoc {
+  height: 100%;
+  background-color: #fff;
+}
+.cl-hoc .no-image-tip {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.cl-hoc .image-noData {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-hoc .image-noData .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-hoc .hoc-title-container {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 21px;
+}
+.cl-hoc .cl-hoc-container {
+  height: 100%;
+  padding: 0 32px 14px 32px;
+}
+.cl-hoc .cl-hoc-container .cl-hoc-tip-container .el-icon-info {
+  color: #6c7280;
+}
+.cl-hoc .cl-hoc-title {
+  height: 56px;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 56px;
+}
+.cl-hoc .cl-hoc-title .tooltip-container .tip-text {
+  padding: 10px;
+}
+.cl-hoc .cl-hoc-title .tooltip-container .tip-text .tip-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.cl-hoc .cl-hoc-title .tooltip-container .tip-text .tip-part {
+  line-height: 20px;
+  word-break: normal;
+}
+.cl-hoc .cl-hoc-con {
+  height: calc(100% - 55px);
+  overflow-y: auto;
+  display: flex;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left {
+  width: 440px;
+  background-color: #edf0f5;
+  margin-right: 20px;
+  flex-shrink: 0;
+  padding: 20px 24px;
+  height: 100%;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-top-container .left-title {
+  margin-bottom: 20px;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-top-container .hoc-filter-container {
+  display: flex;
+  line-height: 32px;
+  margin-bottom: 12px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-left
+  .cl-left-top-container
+  .hoc-filter-container
+  .title-text {
+  width: 100px;
+  flex: 1;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-middle-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 131px);
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-thumb {
+  flex: 1;
+  display: flex;
+  background-color: #fff;
+  flex-wrap: wrap;
+  overflow: hidden;
+  align-content: flex-start;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-thumb .cl-left-thumb-item {
+  width: calc(25% - 10px);
+  height: calc(16.6% - 10px);
+  margin: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-thumb .cl-left-thumb-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-thumb .active,
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-thumb .cl-left-thumb-item:hover {
+  border: solid 1px #00a5a7;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-page {
+  padding: 0 10px;
+  flex-shrink: 0;
+  background-color: #fff;
+  text-align: right;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-left .cl-left-page .el-pagination {
+  border-top: solid 1px #ccc;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right {
+  overflow: hidden;
+  flex: 1;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-top {
+  height: 60%;
+  display: flex;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-top .left-item {
+  margin-right: 20px;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-top .cl-right-top-item {
+  width: calc(50% - 10px);
+  padding: 20px 24px;
+  height: 100%;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title {
+  padding-bottom: 12px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title
+  .ori-image-title {
+  margin-bottom: 6px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title
+  .ori-tag-select-container {
+  display: flex;
+  font-size: 14px;
+  line-height: 32px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title
+  .ori-tag-select-container
+  .ori-select-title {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 10px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title
+  .cl-right-title-silde {
+  display: flex;
+  margin-top: 12px;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .cl-right-title
+  .cl-right-title-silde
+  .cl-right-title-label {
+  font-size: 14px;
+  color: #333333;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .ori-image-container {
+  height: calc(100% - 100px);
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-top
+  .cl-right-top-item
+  .ori-image-container
+  img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-con {
+  height: calc(100% - 63px);
+  position: relative;
+  overflow: hidden;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-con .img-container {
+  height: calc(100% - 28px);
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-con .img-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-con .image-title {
+  width: 100%;
+  margin-top: 12px;
+  text-align: center;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-footer {
+  height: calc(40% - 20px);
+  overflow: hidden;
+  margin-top: 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 20px 24px 24px 24px;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-footer .cl-right-footer-info {
+  height: 40px;
+}
+.cl-hoc .cl-hoc-con .cl-hoc-right .cl-right-footer .cl-right-footer-con {
+  height: calc(100% - 40px);
+  display: flex;
+  overflow: hidden;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-arrowCon {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  justify-content: center;
+  display: flex;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-marquee {
+  display: flex;
+  max-width: 100%;
+  height: 100%;
+  overflow-x: auto;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item {
+  width: auto;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-image {
+  cursor: pointer;
+  float: left;
+  width: 220px;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-image
+  .image-container {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-image
+  .image-container
+  img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-title {
+  width: 220px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-arrow {
+  float: left;
+  width: 110px;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .cl-right-footer-item
+  .cl-right-footer-arrow
+  i {
+  font-size: 40px;
+  color: #dcdfe6;
+}
+.cl-hoc
+  .cl-hoc-con
+  .cl-hoc-right
+  .cl-right-footer
+  .cl-right-footer-con
+  .itemActive {
+  border: 1px solid #00a5a7;
+}
+</style>
diff --git a/mindinsight/ui/src/views/explain/saliency-map.vue b/mindinsight/ui/src/views/explain/saliency-map.vue
index 54536f8e..de5aa39e 100644
--- a/mindinsight/ui/src/views/explain/saliency-map.vue
+++ b/mindinsight/ui/src/views/explain/saliency-map.vue
@@ -17,27 +17,27 @@ limitations under the License.
   <div class="cl-saliency-map">
     <!-- Page Title -->
     <div class="cl-saliency-map-title">
-      {{$t('explain.title')}}
+      {{ $t('explain.title') }}
       <el-tooltip placement="right-start"
                   effect="light">
         <div slot="content"
-             class="tooltip-container">
+             class="saliency-tooltip-container">
           <div class="cl-saliency-map-tip">
             <div class="tip-title">
-              {{$t('explain.mainTipTitle')}}
+              {{ $t('explain.mainTipTitle') }}
             </div>
             <div class="tip-part">
-              {{$t('explain.mainTipPartOne')}}
+              {{ $t('explain.mainTipPartOne') }}
             </div>
             <div class="tip-part">
-              {{$t('explain.mainTipPartTwo')}}
+              {{ $t('explain.mainTipPartTwo') }}
             </div>
             <div class="tip-part">
-              {{$t('explain.mainTipPartThree')}}
+              {{ $t('explain.mainTipPartThree') }}
             </div>
             <a :href="$t('explain.mainTipPartFour')"
                target="_blank">
-              {{$t('explain.mainTipPartFour')}}
+              {{ $t('explain.mainTipPartFour') }}
             </a>
           </div>
         </div>
@@ -50,87 +50,104 @@ limitations under the License.
       <select-group :checkboxes="allExplainers"
                     @updateCheckedList="updateSelectedExplainers"
                     :title="$t('explain.explainMethod')">
-        <span class="methods-action"
-              @click="goMetric">{{$t('explain.viewScore')}}</span>
+        <span v-if="hasMetric"
+              class="methods-action"
+              @click="goMetric">{{
+          $t('explain.viewScore')
+        }}</span>
       </select-group>
     </div>
     <!-- Parameters Fetch -->
     <div class="cl-saliency-map-condition">
-      <div class="condition-left">
-        <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">
+      <div class="condition-item line-title">
+        {{ $t('explain.filterImg') }}
+      </div>
+      <!-- Truth Labels -->
+      <div class="condition-item">
+        {{ $t('explain.tag') }}
+        <el-tooltip placement="bottom-start"
+                    effect="light">
+          <div slot="content"
+               class="saliency-tooltip-container">
+            {{ $t('explain.tagTip') }}
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+        <div class="search-select">
           <search-select multiple
                          plain
                          :source="truthLabels"
                          @selectedUpdate="updateSelected"
-                         @selectEnter="fetch">
+                         @selectEnter="fetch"
+                         @selectBlur="fetch"
+                         @cancelLabel="fetch">
           </search-select>
         </div>
-        <!-- Button -->
-        <div class="condition-item">
-          <el-button type="primary"
-                     class="condition-button"
-                     @click="fetch">{{ $t('explain.fetch') }}</el-button>
-        </div>
-        <!-- Min Confidence -->
-        <div class="condition-item">
-          {{ $t('explain.minConfidence')}}
-          <el-tooltip placement="bottom-start"
-                      effect="light"
-                      popper-class="confidence-tooltip">
-            <div slot="content"
-                 class="tooltip-container">
-              {{$t('explain.minConfidenceTip')}}
-            </div>
-            <i class="el-icon-info"></i>
-          </el-tooltip>
-          {{$t('symbols.colon')}}
-          {{minConfidence}}
-        </div>
       </div>
-      <div class="condition-right">
-        <!-- Sorted Name -->
-        <div class="condition-item">
-          <span class="item-children">{{$t('explain.imgSort')}}</span>
-          <el-select v-model="sortedName"
-                     @change="sortedNameChange"
-                     popper-class="saliency-map-selector">
-            <el-option v-for="name of sortedNames"
-                       :key="name.label"
-                       :label="name.label"
-                       :value="name.value">
-            </el-option>
-          </el-select>
-        </div>
-        <!-- Open Superpose -->
-        <div class="condition-item">
-          <span class="item-children">{{
-            $t('explain.superposeImg')
-          }}</span>
-          <el-switch v-model="ifSuperpose"
-                     active-color="#00a5a7"></el-switch>
-        </div>
+      <!-- Label Type Filter -->
+      <div class="condition-item margin-left">
+        {{ $t('explain.predictionType') }}
+        <el-tooltip placement="bottom-start"
+                    effect="light">
+          <div slot="content"
+               class="saliency-tooltip-container">
+            {{ $t('explain.typeTip') }}
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+        <el-checkbox-group v-model="predictionTypes"
+                           class="selector"
+                           @change="fetch"
+                           :disabled="!hasPrediction || ifNoData">
+          <el-checkbox :label="TP">{{TP}}</el-checkbox>
+          <el-checkbox :label="FN">{{FN}}</el-checkbox>
+          <el-checkbox :label="FP">{{FP}}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <!-- Min Confidence -->
+      <div class="condition-item">
+        {{ $t('explain.minConfidence') }}
+        <el-tooltip placement="bottom-start"
+                    effect="light">
+          <div slot="content"
+               class="saliency-tooltip-container">
+            {{ $t('explain.minConfidenceTip') }}
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+        <span>{{ $t('symbols.colon') }}</span>
+        <span>{{ minConfidence }}</span>
+      </div>
+      <!-- Gap -->
+      <div class="item-gap"></div>
+      <!-- Sorted Name -->
+      <div class="condition-item">
+        <span class="item-children">{{ $t('explain.imgSort') }}</span>
+        <el-select v-model="sortedName"
+                   @change="sortedNameChange"
+                   popper-class="saliency-map-selector">
+          <el-option v-for="name of sortedNames"
+                     :key="name.label"
+                     :label="name.label"
+                     :value="name.value">
+          </el-option>
+        </el-select>
+      </div>
+      <!-- Open Superpose -->
+      <div class="condition-item">
+        <span class="item-children">{{ $t('explain.superposeImg') }}</span>
+        <el-switch v-model="ifSuperpose"
+                   active-color="#00a5a7"></el-switch>
       </div>
     </div>
     <!-- Data Table -->
     <div class="cl-saliency-map-table">
       <div class="table-nodata"
-           v-if="ifTableLoading">
+           v-if="ifNoData">
         <img :src="require('@/assets/images/nodata.png')"
-             alt="">
+             alt="" />
         <span class="nodata-text"
-              v-if="!ifError">
+              v-if="ifLoading">
           {{ $t('public.dataLoading') }}
         </span>
         <span class="nodata-text"
@@ -144,7 +161,7 @@ limitations under the License.
                   border
                   height="100%"
                   :span-method="mergeTable"
-                  :empty-text="$t('explain.noData')">
+                  :empty-text="emptyText">
           <!-- Original Picture Column-->
           <el-table-column :label="$t('explain.originalPicture')"
                            width="270"
@@ -166,34 +183,28 @@ limitations under the License.
                             effect="light"
                             popper-class="table-tooltip">
                   <div slot="content"
-                       class="tooltip-container">
+                       class="saliency-tooltip-container">
                     <div class="cl-saliency-map-tip tag-tip">
                       <div class="tip-item tip-title">
-                        {{$t('explain.forecastTagTip')}}
+                        {{ $t('explain.forecastTagTip') }}
                       </div>
                       <div class="tip-item">
                         <img :src="require('@/assets/images/explain-tp.svg')"
-                             class="tip-icon">
-                        {{$t('symbols.colon')}}
-                        {{$t('explain.TP')}}
+                             class="tip-icon" />
+                        {{ $t('symbols.colon') }}
+                        {{ $t('explain.TP') }}
                       </div>
                       <div class="tip-item">
                         <img :src="require('@/assets/images/explain-fn.svg')"
-                             class="tip-icon">
-                        {{$t('symbols.colon')}}
-                        {{$t('explain.FN')}}
+                             class="tip-icon" />
+                        {{ $t('symbols.colon') }}
+                        {{ $t('explain.FN') }}
                       </div>
                       <div class="tip-item">
                         <img :src="require('@/assets/images/explain-fp.svg')"
-                             class="tip-icon">
-                        {{$t('symbols.colon')}}
-                        {{$t('explain.FP')}}
-                      </div>
-                      <div class="tip-item">
-                        <img :src="require('@/assets/images/explain-tn.svg')"
-                             class="tip-icon">
-                        {{$t('symbols.colon')}}
-                        {{$t('explain.TN')}}
+                             class="tip-icon" />
+                        {{ $t('symbols.colon') }}
+                        {{ $t('explain.FP') }}
                       </div>
                     </div>
                   </div>
@@ -202,12 +213,49 @@ limitations under the License.
               </span>
             </template>
             <template slot-scope="scope">
-              <div class="table-forecast-tag">
+              <div class="table-forecast-tag"
+                   v-if="uncertaintyEnabled">
+                <!-- Tag Title -->
+                <div class="tag-title-true">
+                  <div class="first">{{ $t('explain.tag') }}</div>
+                  <div>{{ $t('explain.confidenceRange') }}</div>
+                  <div class="center">{{ $t('explain.uncertainty') }}</div>
+                </div>
+                <!-- Tag content -->
+                <div class="tag-content">
+                  <div v-for="(tag, index) in scope.row.inferences"
+                       :key="tag.label"
+                       class="tag-content-item tag-content-item-true"
+                       :class="{
+                      'tag-active': index === scope.row.activeLabelIndex,
+                      'tag-tp': tag.prediction_type.toUpperCase() === TP,
+                      'tag-fn': tag.prediction_type.toUpperCase() === FN,
+                      'tag-fp': tag.prediction_type.toUpperCase() === FP,
+                    }"
+                       @click="changeActiveLabel(scope.row, index)">
+                    <div class="first content-label">{{ tag.label }}</div>
+                    <div>
+                      <div>{{ tag.confidence.toFixed(3) }}</div>
+                      <div>
+                        {{
+                          `[${Math.floor(tag.confidence_itl95[0] * 100) / 100},`+
+                          ` ${Math.ceil(tag.confidence_itl95[1] * 100) / 100}]`
+                        }}
+                      </div>
+                    </div>
+                    <div class="center">
+                      {{ tag.confidence_sd === 0 ? 0 : tag.confidence_sd.toFixed(6) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-forecast-tag"
+                   v-else>
                 <!--Tag Title-->
                 <div class="tag-title-false">
                   <div></div>
-                  <div>{{$t('explain.tag')}}</div>
-                  <div>{{$t('explain.confidence')}}</div>
+                  <div>{{ $t('explain.tag') }}</div>
+                  <div>{{ $t('explain.confidence') }}</div>
                 </div>
                 <!--Tag content-->
                 <div class="tag-content">
@@ -215,16 +263,18 @@ limitations under the License.
                        :key="tag.label"
                        class="tag-content-item tag-content-item-false"
                        :class="{
-                        'tag-active': index === scope.row.activeLabelIndex,
-                        'tag-tp': tag.type === 'tp',
-                        'tag-fn': tag.type === 'fn',
-                        'tag-fp': tag.type === 'fp'
-                      }"
+                      'tag-active': index === scope.row.activeLabelIndex,
+                      'tag-tp': tag.prediction_type.toUpperCase() === TP,
+                      'tag-fn': tag.prediction_type.toUpperCase() === FN,
+                      'tag-fp': tag.prediction_type.toUpperCase() === FP,
+                    }"
                        @click="changeActiveLabel(scope.row, index)">
                     <div></div>
                     <div class="content-label"
-                         :title="tag.label">{{tag.label}}</div>
-                    <div>{{tag.confidence.toFixed(3)}}</div>
+                         :title="tag.label">
+                      {{ tag.label }}
+                    </div>
+                    <div>{{ tag.confidence.toFixed(3) }}</div>
                   </div>
                 </div>
               </div>
@@ -237,13 +287,19 @@ limitations under the License.
                            class-name="canvas-cell"
                            :resizable="false">
             <template slot="header">
-              <span :title="explainer">{{explainer}}</span>
+              <span :title="explainer">{{ explainer }}</span>
             </template>
             <template slot-scope="scope">
-              <superpose-img v-if="scope.row.inferences[scope.row.activeLabelIndex][explainer]"
+              <superpose-img v-if="
+                  scope.row.inferences[scope.row.activeLabelIndex][explainer]
+                "
                              containerSize="250"
                              :backgroundImg="getImgURL(scope.row.image)"
-                             :targetImg="getImgURL(scope.row.inferences[scope.row.activeLabelIndex][explainer])"
+                             :targetImg="
+                  getImgURL(
+                    scope.row.inferences[scope.row.activeLabelIndex][explainer]
+                  )
+                "
                              :ifSuperpose="ifSuperpose"
                              @click.native="showImgDiglog(scope.row, explainer)">
               </superpose-img>
@@ -256,9 +312,9 @@ limitations under the License.
             <template>
               <div class="table-nodata">
                 <img :src="require('@/assets/images/nodata.png')"
-                     alt="">
+                     alt="" />
                 <span class="nodata-text">
-                  {{$t('explain.noExplainer')}}
+                  {{ $t('explain.noExplainer') }}
                 </span>
               </div>
             </template>
@@ -301,6 +357,13 @@ import searchSelect from '../../components/search-select';
 import requestService from '../../services/request-service.js';
 import {basePath} from '@/services/fetcher';
 
+// The effective prediction types
+const [TP, FN, FP] = ['TP', 'FN', 'FP'];
+// The sorted name of image
+const [CONFIDENCE, UNCERTAINTY] = ['confidence', 'uncertainty'];
+// The sorted type of image
+const DESCENDING = 'descending';
+
 export default {
   components: {
     selectGroup,
@@ -309,6 +372,9 @@ export default {
   },
   data() {
     return {
+      ifNoData: true,
+      ifLoading: true,
+      ifError: false,
       trainID: '', // The id of the train
       selectedExplainers: [], // The selected explainer methods
       allExplainers: [], // The list of all explainer method
@@ -319,21 +385,18 @@ export default {
         imgShow: false,
       }, // The object of show img dialog
       ifSuperpose: false, // If open the superpose function
-      ifTableLoading: true, // If the table waiting for the data
-      ifError: false, // If request error
       minConfidence: 0, // The min confidence
       tableData: null, // The table data
       selectedTruthLabels: [], // The selected truth labels
       truthLabels: [], // The list of all truth labels
-      // truthLabelsTemp: [], // The list of all truth labels
-      sortedName: 'confidence', // The sorted Name of sort
+      sortedName: CONFIDENCE, // The sorted Name of sort
       sortedNames: [
         {
           label: this.$t('explain.byProbability'),
-          value: 'confidence',
+          value: CONFIDENCE,
         },
       ], // The list of all sorted Name
-      sortedType: 'descending', // The default sorted type
+      sortedType: DESCENDING, // The default sorted type
       pageInfo: {
         currentPage: 1,
         pageSize: 2,
@@ -341,8 +404,18 @@ export default {
       }, // The object of pagination information
       tableHeight: 0, // The height of table to fix the table header
       queryParameters: null, // The complete parameters of query table information, have pagination information
-      labelReady: false, // If the truth labels are ready
       pageChangeDelay: 200, // The time interval used to prevent the violent clicks of changing current page
+      emptyText: '', // The empty text of table
+      TP: TP, // Means true positive
+      FN: FN, // Means false negative
+      FP: FP, // Means false positive
+      predictionTypes: [TP, FN, FP], // The effective filter prediction types
+      hasPrediction: true, // If prediction type filter is effective
+      hasMetric: false, // If has metric information
+      requestTime: 0, // The count of request
+      requestDelay: 1500, // The delay of request in ms
+      requestLimit: 3, // The limit of request
+      requestTimer: null, // The interval timer of request
     };
   },
   computed: {
@@ -353,6 +426,7 @@ export default {
         labels: this.selectedTruthLabels,
         explainer: this.selectedExplainers,
         sorted_name: this.sortedName,
+        prediction_types: this.predictionTypes,
       };
     },
   },
@@ -398,7 +472,7 @@ export default {
       this.pageInfo.currentPage = 1;
       this.queryParameters.offset = this.pageInfo.currentPage - 1;
       this.queryParameters.limit = val;
-      this.queryPageInfo(this.queryParameters);
+      this.queryPageInfo(this.queryParameters).then();
     },
     /**
      * The logic that is executed when the current page number changed
@@ -408,7 +482,7 @@ export default {
       clearTimeout(this.pageChangeTimer);
       this.pageChangeTimer = setTimeout(() => {
         this.queryParameters.offset = val - 1;
-        this.queryPageInfo(this.queryParameters);
+        this.queryPageInfo(this.queryParameters).then();
         this.pageChangeTimer = null;
       }, this.pageChangeDelay);
     },
@@ -420,7 +494,7 @@ export default {
       this.queryParameters.sorted_name = val;
       this.pageInfo.currentPage = 1;
       this.queryParameters.offset = this.pageInfo.currentPage - 1;
-      this.queryPageInfo(this.queryParameters);
+      this.queryPageInfo(this.queryParameters).then();
     },
     /**
      * The logic of click the explainer method canvas
@@ -438,46 +512,64 @@ export default {
     /**
      * Request basic information of train
      * @param {Object} params Parameters of the request basic information of train interface
-     * @return {Object}
      */
     queryTrainInfo(params) {
-      return new Promise((resolve, reject) => {
-        requestService
-            .queryTrainInfo(params)
-            .then(
-                (res) => {
-                  if (res && res.data) {
-                    if (res.data.saliency) {
-                      this.minConfidence = res.data.saliency.min_confidence
+      requestService
+          .queryTrainInfo(params)
+          .then(
+              (res) => {
+                if (res && res.data) {
+                  if (res.data.saliency) {
+                    this.minConfidence = res.data.saliency.min_confidence
                     ? res.data.saliency.min_confidence
                     : '--';
-                      this.allExplainers = this.arrayToCheckBox(
-                          res.data.saliency.explainers,
-                      );
+                    this.hasMetric = res.data.saliency.metrics.length
+                    ? true
+                    : false;
+                    this.allExplainers = this.arrayToCheckBox(
+                        res.data.saliency.explainers,
+                    );
+                  }
+                  if (res.data.classes) {
+                    const truthLabels = [];
+                    for (let i = 0; i < res.data.classes.length; i++) {
+                      truthLabels.push(res.data.classes[i].label);
                     }
-                    if (res.data.classes) {
-                      const truthLabels = [];
-                      for (let i = 0; i < res.data.classes.length; i++) {
-                        truthLabels.push(res.data.classes[i].label);
-                      }
-                      this.truthLabels = truthLabels;
+                    this.truthLabels = truthLabels;
+                  }
+                  if (res.data.uncertainty) {
+                    this.uncertaintyEnabled = res.data.uncertainty.enabled
+                    ? true
+                    : false;
+                    // The sort by uncertainty only valid when uncertaintyEnabled is true
+                    if (this.uncertaintyEnabled) {
+                      this.sortedNames.push({
+                        label: this.$t('explain.byUncertainty'),
+                        value: UNCERTAINTY,
+                      });
                     }
                   }
-                  resolve(true);
-                },
-                (error) => {
-                  reject(error);
-                },
-            )
-            .catch((error) => {
-              reject(error);
-            });
-      });
+                }
+                this.ifNoData = false;
+                this.ifLoading = false;
+              },
+              () => {
+                this.ifNoData = false;
+                this.ifLoading = false;
+                this.ifError = true;
+              },
+          )
+          .catch(() => {
+            this.ifNoData = false;
+            this.ifLoading = false;
+            this.ifError = true;
+          });
     },
     /**
      * The complete logic of table update when any condition changed
      * @param {Object} params The main parameters
      * @param {Object} supParams The supplymentary parameters
+     * @return {Promise}
      */
     updateTable(params, supParams) {
       const paramsTemp = JSON.parse(JSON.stringify(params));
@@ -496,50 +588,64 @@ export default {
         }
       }
       Object.assign(paramsTemp, supParams);
-      this.queryPageInfo(paramsTemp);
+      return this.queryPageInfo(paramsTemp);
     },
     /**
      * Request page table information
      * @param {Object} params Parameters of the request page information interface
+     * @return {Promise}
      */
     queryPageInfo(params) {
       params.train_id = decodeURIComponent(params.train_id);
       this.queryParameters = params;
-      requestService
-          .queryPageInfo(params)
-          .then(
-              (res) => {
-                // Make sure the offset of response is equal to offset of request
-                if (params.offset === this.queryParameters.offset) {
-                  if (res && res.data && res.data.samples) {
-                    if (this.minConfidence === '--') {
-                      this.tableData = this.processTableData(res.data.samples, false);
-                      this.pageInfo.total =
-                  res.data.count !== undefined ? res.data.count : 0;
+      return new Promise((resolve) => {
+        requestService
+            .queryPageInfo(params)
+            .then(
+                (res) => {
+                  // Make sure the offset of response is equal to offset of request
+                  if (params.offset === this.queryParameters.offset) {
+                    if (res && res.data && res.data.samples) {
+                      this.tableData = this.processTableData(res.data.samples);
+                      this.pageInfo.total = res.data.count ? res.data.count : 0;
+                      if (!res.data.count) {
+                        // 3: Prediction type has three valid values
+                        // When length === 3 || length === 0, means search without type limit
+                        const typeLimit =
+                          params.prediction_types.length !== 3 &&
+                          params.prediction_types.length !== 0;
+                        if (params.labels || typeLimit) {
+                        // With label or type limit
+                          this.emptyText = this.$t('public.noData');
+                        } else {
+                          // Without limit
+                          if (this.requestTime === this.requestLimit) {
+                            this.emptyText = this.$t('public.noData');
+                          } else {
+                            this.emptyText = this.$t('explain.noData');
+                          }
+                        }
+                        resolve(false);
+                      } else {
+                        resolve(true);
+                      }
                     } else {
-                      this.tableData = this.processTableData(
-                          res.data.samples,
-                          this.minConfidence,
-                      );
-                      this.pageInfo.total =
-                  res.data.count !== undefined ? res.data.count : 0;
+                      this.pageInfo.total = 0;
                     }
-                  } else {
-                    this.pageInfo.total = 0;
                   }
-                  this.ifError = false;
-                  this.ifTableLoading = false;
-                }
-              },
-              (error) => {
-                this.ifError = true;
-                this.ifTableLoading = true;
-              },
-          )
-          .catch((e) => {
-            this.ifError = true;
-            this.ifTableLoading = true;
-          });
+                },
+                () => {
+                  this.ifNoData = false;
+                  this.ifLoading = false;
+                  this.ifError = true;
+                },
+            )
+            .catch(() => {
+              this.ifNoData = false;
+              this.ifLoading = false;
+              this.ifError = true;
+            });
+      });
     },
     /**
      * Process the original table data
@@ -548,43 +654,17 @@ export default {
      * If min confidence is lost, replace with type except number, such as 'false', 'null'
      * @return {Object} The processed table data
      */
-    processTableData(samples, minConfidence) {
+    processTableData(samples) {
       for (let i = 0; i < samples.length; i++) {
         samples[i].activeLabelIndex = 0;
         if (samples[i].inferences) {
           for (let j = 0; j < samples[i].inferences.length; j++) {
-            if (
-              typeof minConfidence === 'number' &&
-              typeof samples[i].inferences[j].confidence === 'number'
-            ) {
-              // Model Inference Result
-              const MIR =
-                samples[i].inferences[j].confidence * 100 >=
-                minConfidence * 100;
-              let labelValid;
-              // The label if valid, judged by whether it exists in the truth labels
-              if (samples[i].labels && samples[i].inferences[j].label) {
-                labelValid =
-                  samples[i].labels.indexOf(samples[i].inferences[j].label) >=
-                  0;
-              } else {
-                labelValid = false;
+            if (!samples[i].inferences[j].prediction_type) {
+              // When prediction type is null, prediction type filter is useless
+              if (this.hasPrediction) {
+                this.hasPrediction = false;
               }
-              if (MIR) {
-                if (labelValid) {
-                  samples[i].inferences[j].type = 'tp';
-                } else {
-                  samples[i].inferences[j].type = 'fp';
-                }
-              } else {
-                if (labelValid) {
-                  samples[i].inferences[j].type = 'fn';
-                } else {
-                  samples[i].inferences[j].type = 'tn';
-                }
-              }
-            } else {
-              samples[i].inferences[j].type = 'none';
+              samples[i].inferences[j].prediction_type = 'none';
             }
             // Defined the attr{key: explainer, value: overlay} out the saliencies
             // Can provide some convenience for some table operation
@@ -655,6 +735,25 @@ export default {
         query: {id: this.trainID},
       });
     },
+    initPage() {
+      return new Promise((resolve) => {
+        this.updateTable(this.baseQueryParameters, {
+          limit: this.pageInfo.pageSize,
+          offset: this.pageInfo.currentPage - 1,
+        }).then((hasData) => {
+          // If has data now
+          if (hasData) {
+            const params = {
+              train_id: this.trainID,
+            };
+            this.queryTrainInfo(params);
+            resolve(true);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    },
   },
   created() {
     if (!this.$route.query.id) {
@@ -663,24 +762,28 @@ export default {
       return;
     }
     this.trainID = this.$route.query.id;
-    const params = {
-      train_id: this.trainID,
-    };
-    this.queryTrainInfo(params)
-        .then(
-            (res) => {
-              this.updateTable(this.baseQueryParameters, {
-                limit: this.pageInfo.pageSize,
-                offset: this.pageInfo.currentPage - 1,
-              });
-            },
-            (error) => {
-              this.ifError = true;
-            },
-        )
-        .catch((e) => {
-          this.ifError = true;
-        });
+    this.initPage().then((hasData) => {
+      this.requestTime = 1;
+      if (!hasData) {
+        this.requestTimer = setInterval(() => {
+          this.initPage().then((hasDataNow) => {
+            this.requestTime++;
+            if (hasDataNow) {
+              clearInterval(this.requestTimer);
+            } else {
+              if (this.requestTime === this.requestLimit) {
+                // Still has no data
+                this.ifLoading = false;
+                clearInterval(this.requestTimer);
+              }
+            }
+          });
+        }, this.requestDelay);
+      }
+    });
+  },
+  destroyed() {
+    clearInterval(this.requestTimer);
   },
   mounted() {
     // Change the page title
@@ -700,6 +803,12 @@ export default {
   font-weight: normal;
 }
 
+.cl-saliency-map .el-checkbox {
+  margin-right: 16px;
+}
+.cl-saliency-map .el-checkbox__label {
+  padding-left: 8px;
+}
 .cl-saliency-map .el-icon-info {
   color: #6c7280;
 }
@@ -714,15 +823,31 @@ export default {
 .cl-saliency-map .el-checkbox__label {
   color: #333333 !important;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .pic-cell .cell {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .el-table__body
+  .pic-cell
+  .cell {
   text-overflow: clip;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .pic-cell .cell img {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .el-table__body
+  .pic-cell
+  .cell
+  img {
   height: 250px;
   width: 250px;
   object-fit: contain;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .canvas-cell img {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .el-table__body
+  .canvas-cell
+  img {
   cursor: pointer;
 }
 .cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .cell {
@@ -734,18 +859,21 @@ export default {
   max-width: 650px;
 }
 
-.el-tooltip__popper .tooltip-container .cl-saliency-map-tip {
+.el-tooltip__popper .saliency-tooltip-container .cl-saliency-map-tip {
   padding: 10px;
 }
-.el-tooltip__popper .tooltip-container .cl-saliency-map-tip .tip-title {
+.el-tooltip__popper
+  .saliency-tooltip-container
+  .cl-saliency-map-tip
+  .tip-title {
   font-size: 16px;
   font-weight: bold;
 }
-.el-tooltip__popper .tooltip-container .cl-saliency-map-tip .tip-part {
+.el-tooltip__popper .saliency-tooltip-container .cl-saliency-map-tip .tip-part {
   line-height: 20px;
   word-break: normal;
 }
-.el-tooltip__popper .tooltip-container .tag-tip .tip-item {
+.el-tooltip__popper .saliency-tooltip-container .tag-tip .tip-item {
   margin-bottom: 10px;
   font-size: 12px;
   color: #575d6c;
@@ -753,13 +881,16 @@ export default {
   display: flex;
   align-items: center;
 }
-.el-tooltip__popper .tooltip-container .tag-tip .tip-item .tip-icon {
+.el-tooltip__popper .saliency-tooltip-container .tag-tip .tip-item .tip-icon {
   margin-right: 4px;
 }
-.el-tooltip__popper .tooltip-container .tag-tip .tip-item:last-of-type {
+.el-tooltip__popper
+  .saliency-tooltip-container
+  .tag-tip
+  .tip-item:last-of-type {
   margin-bottom: 0px;
 }
-.el-tooltip__popper .tooltip-container .tag-tip .tip-title {
+.el-tooltip__popper .saliency-tooltip-container .tag-tip .tip-title {
   color: #333333;
 }
 </style>
@@ -800,50 +931,46 @@ export default {
   text-decoration: underline;
 }
 .cl-saliency-map .cl-saliency-map-condition {
-  padding: 0px 32px 21px 32px;
-  height: 58px;
+  padding: 0px 32px 21px;
+  line-height: 37px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   border-bottom: 1px solid #e6ebf5;
+  flex-wrap: wrap;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-left {
-  height: 100%;
+.cl-saliency-map .cl-saliency-map-condition .item-gap {
+  flex-grow: 1;
+}
+.cl-saliency-map .cl-saliency-map-condition .margin-left {
+  margin-left: 24px;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-item {
+  margin-right: 16px;
   display: flex;
   align-items: center;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item {
-  margin-right: 16px;
-  height: 100%;
+.cl-saliency-map .cl-saliency-map-condition .condition-item .item-children {
+  margin-right: 8px;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-item .selector {
+  margin-left: 20px;
   display: flex;
   align-items: center;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item .condition-button {
+.cl-saliency-map .cl-saliency-map-condition .condition-item .condition-button {
   padding: 7px 15px;
   border-radius: 2px;
   border: 1px solid #00a5a7;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item .el-icon-info {
+.cl-saliency-map .cl-saliency-map-condition .condition-item .el-icon-info {
   margin-right: 4px;
   margin-left: 2px;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-left .search-select {
+.cl-saliency-map .cl-saliency-map-condition .search-select {
   width: 200px;
   height: 32px;
 }
-.cl-saliency-map .cl-saliency-map-condition .condition-right {
-  display: flex;
-  align-items: center;
-}
-.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item {
-  margin-right: 24px;
-  display: flex;
-  align-items: center;
-}
-.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item .item-children {
-  margin-right: 12px;
-}
-.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item:last-of-type {
+.cl-saliency-map .cl-saliency-map-condition .condition-item:last-of-type {
   margin-right: 0px;
 }
 .cl-saliency-map .cl-saliency-map-table {
@@ -870,33 +997,63 @@ export default {
   display: flex;
   flex-direction: column;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .center {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .center {
   text-align: center;
 }
 .cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag div,
 .cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag span {
   font-size: 12px;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-true {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-title-true {
   display: grid;
   grid-template-columns: 35% 35% 30%;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-true .first {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-title-true
+  .first {
   padding-left: 12px;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-false {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-title-false {
   display: grid;
   grid-template-columns: 20% 40% 40%;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content {
   flex-grow: 1;
   overflow-y: scroll;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content::-webkit-scrollbar {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content::-webkit-scrollbar {
   width: 0px;
   height: 0px;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item {
   background-repeat: no-repeat;
   background-position: 2px 0px;
   box-sizing: border-box;
@@ -907,48 +1064,106 @@ export default {
   border-radius: 3px;
   margin-bottom: 6px;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .first {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item
+  .first {
   padding-left: 10px;
   background-color: rgba(0, 0, 0, 0) !important;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .more-action {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item
+  .more-action {
   cursor: pointer;
   text-decoration: underline;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .content-label {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item
+  .content-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item-true {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item-true {
   display: grid;
   grid-template-columns: 35% 35% 30%;
   align-items: center;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item-false {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-content-item-false {
   display: grid;
   grid-template-columns: 20% 40% 40%;
   align-items: center;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-active {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-active {
   background-color: #00a5a7;
   color: #ffffff;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content :hover {
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  :hover {
   background-color: #00a5a7;
   color: #ffffff;
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-tp {
-  background-image: url("../../assets/images/explain-tp.svg");
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-tp {
+  background-image: url('../../assets/images/explain-tp.svg');
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-fn {
-  background-image: url("../../assets/images/explain-fn.svg");
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-fn {
+  background-image: url('../../assets/images/explain-fn.svg');
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-fp {
-  background-image: url("../../assets/images/explain-fp.svg");
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-fp {
+  background-image: url('../../assets/images/explain-fp.svg');
 }
-.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-tn {
-  background-image: url("../../assets/images/explain-tn.svg");
+.cl-saliency-map
+  .cl-saliency-map-table
+  .table-data
+  .table-forecast-tag
+  .tag-content
+  .tag-tn {
+  background-image: url('../../assets/images/explain-tn.svg');
 }
 .cl-saliency-map .cl-saliency-map-pagination {
   padding: 0 32px;
diff --git a/mindinsight/ui/src/views/explain/summary-list.vue b/mindinsight/ui/src/views/explain/summary-list.vue
index afed041e..af11b847 100644
--- a/mindinsight/ui/src/views/explain/summary-list.vue
+++ b/mindinsight/ui/src/views/explain/summary-list.vue
@@ -68,8 +68,24 @@ limitations under the License.
               <template slot-scope="scope">
                 <span class="menu-item operate-btn first-btn"
                       @contextmenu.prevent="rightClick(scope.row, $event, 0)"
-                      @click.stop="goToSaliencyMap(scope.row)">
+                      @click.stop="goToSaliencyMap(scope.row)"
+                      v-if="scope.row.saliency_map">
                   {{$t('explain.title')}} </span>
+                <span class="menu-item operate-btn button-disable"
+                      v-else
+                      :title="$t('explain.disableSaliencyMapTip')">
+                  {{$t('explain.title')}}
+                </span>
+                <span class="menu-item operate-btn"
+                      @contextmenu.prevent="rightClick(scope.row, $event, 1)"
+                      @click.stop="goToConterfactualinterpretation(scope.row)"
+                      v-if="scope.row.hierarchical_occlusion">
+                  {{$t('explain.conterfactualInterpretation')}} </span>
+                <span class="menu-item operate-btn button-disable"
+                      v-else
+                      :title="$t('explain.disableHOCTip')">
+                  {{$t('explain.conterfactualInterpretation')}}
+                </span>
               </template>
             </el-table-column>
           </el-table>
@@ -124,7 +140,7 @@ export default {
         type: 0,
       },
       tableDom: null,
-      operateWidth: localStorage.getItem('milang') === 'en-us' ? 230 : 145,
+      operateWidth: this.$store.state.language === 'en-us' ? 430 : 290,
     };
   },
   computed: {},
@@ -224,7 +240,7 @@ export default {
      */
     goToSaliencyMap(row) {
       this.contextMenu.show = false;
-      const trainId = encodeURIComponent(row.train_id);
+      const trainId = row.train_id;
 
       this.$router.push({
         path: '/explain/saliency-map',
@@ -232,6 +248,27 @@ export default {
       });
     },
 
+    /**
+     * go to Profiler
+     * @param {Object} row select row
+     */
+    goToConterfactualinterpretation(row) {
+      this.contextMenu.show = false;
+      const profilerDir = row.profiler_dir;
+      const trainId = row.train_id;
+      const path = row.relative_path;
+      const router = '/explain/conterfactual-interpretation';
+
+      this.$router.push({
+        path: router,
+        query: {
+          dir: profilerDir,
+          id: trainId,
+          path: path,
+        },
+      });
+    },
+
     rightClick(row, event, type) {
       const maxWidth = 175;
       this.contextMenu.data = row;
@@ -243,31 +280,24 @@ export default {
       this.contextMenu.show = true;
     },
 
-    doRightClick(key) {
+    doRightClick() {
       const row = this.contextMenu.data;
       if (!row) {
         return;
       }
+      this.contextMenu.show = false;
+      const trainId = row.train_id;
       if (this.contextMenu.type) {
-        this.contextMenu.show = false;
-        const profilerDir = encodeURIComponent(row.profiler_dir);
-        const trainId = encodeURIComponent(row.train_id);
-        const path = encodeURIComponent(row.relative_path);
         const router = '/explain/conterfactual-interpretation';
 
         const routeUrl = this.$router.resolve({
           path: router,
           query: {
-            dir: profilerDir,
             id: trainId,
-            path: path,
           },
         });
         window.open(routeUrl.href, '_blank');
       } else {
-        this.contextMenu.show = false;
-        const trainId = encodeURIComponent(row.train_id);
-
         const routeUrl = this.$router.resolve({
           path: '/explain/saliency-map',
           query: {id: trainId},