From 80552b97a9f39b625537a05619ed4dc2b39abe91 Mon Sep 17 00:00:00 2001
From: ArvinHuang <1095369685@qq.com>
Date: Tue, 19 Dec 2023 17:30:58 +0800
Subject: [PATCH] upload: 1.zoom update. 2. added fullscreen operation. 3.
 pearson display update. 4. selection display update. 5. stylesheet update

Signed-off-by: ArvinHuang <1095369685@qq.com>
---
 .../src/components/Pearson/Pearson.vue        | 54 +++++++++++---
 .../fate-board/src/store/modules/assets.ts    |  2 +-
 .../fate-board/src/store/modules/comp.ts      |  1 +
 .../packages/fate-board/src/style/index.scss  |  1 +
 .../transform/model/feature_correlation.ts    | 12 +++-
 .../model/hetero_feature_selection.ts         | 33 ++++-----
 .../dashboard/Information/Information.vue     | 72 ++++++++++++-------
 .../src/views/dashboard/Log/Log.vue           | 14 ++--
 .../fate-board/src/views/detail/Detail.vue    |  3 +-
 .../views/detail/Information/ModelOutput.vue  |  4 +-
 .../src/views/detail/Information/outputs.vue  | 16 +++--
 .../src/views/detail/jobSummary/Dataset.vue   |  8 ++-
 .../src/views/detail/jobSummary/Download.vue  |  2 +-
 .../src/views/history/table/Table.vue         |  1 +
 .../src/views/layout/GlobalLayout.vue         | 10 +++
 .../lib/components/Table/Table.vue            | 20 +++---
 .../packages/fate-visualization/html/main.ts  |  4 +-
 .../fate-visualization/lib/DAGGraphic/DAG.vue |  2 +-
 .../lib/DAGGraphic/DAGContainer.ts            | 68 +++++++++++++-----
 .../lib/DAGGraphic/explainDeps.ts             |  2 +-
 .../lib/HeatMap/HeatMap.vue                   |  5 +-
 21 files changed, 236 insertions(+), 98 deletions(-)

diff --git a/resources-front-end/packages/fate-board/src/components/Pearson/Pearson.vue b/resources-front-end/packages/fate-board/src/components/Pearson/Pearson.vue
index 228226ba..b2d70ecd 100644
--- a/resources-front-end/packages/fate-board/src/components/Pearson/Pearson.vue
+++ b/resources-front-end/packages/fate-board/src/components/Pearson/Pearson.vue
@@ -4,8 +4,8 @@
       class="f-p-table"
       :header="header"
       :data="data"
-      :pageSize="10"
-      :total="total"
+      :size="10"
+      :total="data.length"
       :index="true"
     >
     </FTable>
@@ -40,6 +40,7 @@
           :max="1"
           :min="0"
           :pearson="false"
+          :ext="tooltipFormatter"
         >
         </FHeatMap>
       </section>
@@ -49,8 +50,10 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
 import RoleSelection from './selection.vue';
 
+const store = useStore()
 const props = defineProps([
   'header',
   'data',
@@ -59,20 +62,26 @@ const props = defineProps([
   'localData',
   'remoteData',
 ]);
-const total = computed(() => {
-  return props.data ? props.data.length : 0;
-});
 
+const role = computed(() => store.state.job.details?.fRole);
 const selectonRole = [
   {
     label: 'all',
     value: 'all',
   },
-  {
+];
+if (role.value?.match(/guest/i)) {
+  selectonRole.push({
     label: 'guest',
     value: 'guest',
-  }
-];
+  })
+}
+if (role.value?.match(/host/i)) {
+  selectonRole.push({
+    label: 'host',
+    value: 'guest',
+  })
+}
 const selected = ref('all');
 const correlation = ref<string[]>([]);
 
@@ -116,6 +125,14 @@ const correlationData = computed(() => {
         const yImply = props.localData[y] || props.remoteData[y] || {};
         result = yImply[x] ? Number(yImply[x].toFixed(6)) : yImply[x]
       }
+      if (!result) {
+        const yImply = props.remoteData[x] || props.remoteData[x] || {};
+        result = yImply[y] ? Number(yImply[y].toFixed(6)) : yImply[y]
+      }
+      if (!result) {
+        const yImply = props.remoteData[y] || props.remoteData[y] || {};
+        result = yImply[x] ? Number(yImply[x].toFixed(6)) : yImply[x]
+      }
       row.push(result);
     }
     corrData.push(row);
@@ -123,6 +140,26 @@ const correlationData = computed(() => {
   return corrData;
 });
 
+const tooltipFormatter = {
+  tooltip: {
+    formatter: (params: any) => {
+      const [xc, yc, data] = params.data
+      const x = correlation.value[xc]
+      const y = correlation.value[yc]
+      let getAnonym = (imp: any) => {
+        const cursor = props.data.findIndex((item: any) => item.variable === imp)
+        if (cursor >= 0) {
+          return props.data[cursor].anonym
+        }
+        return ''
+      }
+      const xanony = getAnonym(x)
+      const yanony = getAnonym(y)
+      return `features: ${x}${xanony ? '(' + xanony + ')' : ''}, ${y}${yanony ? '(' + yanony + ')' : ''} <br /> coefficient: ${data}`
+    }
+  }
+}
+
 const coefficient = () => {
   pearsonMap.value.displayLabel();
 };
@@ -166,6 +203,7 @@ watch(
     background: var(--el-bg-color);
     border: 1px solid var(--el-color-info-light-9);
     border-radius: 2px;
+    padding-top: 12px;
   }
 
   .f-p-map-header {
diff --git a/resources-front-end/packages/fate-board/src/store/modules/assets.ts b/resources-front-end/packages/fate-board/src/store/modules/assets.ts
index 9f772243..264d3270 100644
--- a/resources-front-end/packages/fate-board/src/store/modules/assets.ts
+++ b/resources-front-end/packages/fate-board/src/store/modules/assets.ts
@@ -64,7 +64,7 @@ export default {
         } else {
           ElMessage({
             showClose: true,
-            message: `There has no configuration yml for component ${name}`,
+            message: `There has no configuration yaml for component ${name}`,
             center: true,
             type: 'error'
           })
diff --git a/resources-front-end/packages/fate-board/src/store/modules/comp.ts b/resources-front-end/packages/fate-board/src/store/modules/comp.ts
index 00a79eab..81193b5d 100644
--- a/resources-front-end/packages/fate-board/src/store/modules/comp.ts
+++ b/resources-front-end/packages/fate-board/src/store/modules/comp.ts
@@ -104,6 +104,7 @@ export default {
           })
         })
       }
+      return true
     },
 
     async parameterRequest({ state, commit, dispatch }: any) {
diff --git a/resources-front-end/packages/fate-board/src/style/index.scss b/resources-front-end/packages/fate-board/src/style/index.scss
index 74b81296..9aa1e02d 100644
--- a/resources-front-end/packages/fate-board/src/style/index.scss
+++ b/resources-front-end/packages/fate-board/src/style/index.scss
@@ -5,3 +5,4 @@
 @import './common.scss';
 @import './border.scss';
 @import './font.scss';
+@import './animation.scss';
\ No newline at end of file
diff --git a/resources-front-end/packages/fate-board/src/transform/model/feature_correlation.ts b/resources-front-end/packages/fate-board/src/transform/model/feature_correlation.ts
index 7e0f917d..cb4a1de6 100644
--- a/resources-front-end/packages/fate-board/src/transform/model/feature_correlation.ts
+++ b/resources-front-end/packages/fate-board/src/transform/model/feature_correlation.ts
@@ -17,10 +17,12 @@ export default function feature_correlation (
   const { local_corr, remote_corr, vif } = data
   const { column_anonymous_map } = meta
 
+  const isHost = role.match(/host/i)
+
   const  theader = <any>[{
     label: 'variable',
     prop: 'variable',
-    width: 100,
+    width: 90,
   }]
   let tdata = []
 
@@ -29,7 +31,7 @@ export default function feature_correlation (
     theader.push({
       label: 'anonym',
       prop: 'anonym',
-      width: 120,
+      width: 130,
     })
   }
 
@@ -62,7 +64,11 @@ export default function feature_correlation (
 
   let remote_key = Object.keys(remote_corr || {})
   if (remote_key && remote_key.length > 0) {
-    remote_key = sort(remote_key)
+    if (!isHost) {
+      remote_key = sort(remote_key)
+    } else {
+      remote_key = sort(Object.keys(remote_corr[remote_key[0]]))
+    }
   }
 
   const correlation = {
diff --git a/resources-front-end/packages/fate-board/src/transform/model/hetero_feature_selection.ts b/resources-front-end/packages/fate-board/src/transform/model/hetero_feature_selection.ts
index 39511f31..07b5b481 100644
--- a/resources-front-end/packages/fate-board/src/transform/model/hetero_feature_selection.ts
+++ b/resources-front-end/packages/fate-board/src/transform/model/hetero_feature_selection.ts
@@ -64,7 +64,8 @@ export default function hetero_feature_selection(
       const toMetricsData = tData[current] || [];
       const toMetricsHeader = tHeader[current] || [...defaultHeader];
       for (const variable in all_selected_mask) {
-        const row: any = {};
+        const cursor = toMetricsData.findIndex((item: any) => item.variable === variable)
+        const row: any = cursor < 0 ? {} : toMetricsData[cursor];
         row['variable'] = variable;
         for (const col in all_selected_mask[variable]) {
           if (!toMetricsHeader.some((item: any) => item.prop === col)) {
@@ -78,7 +79,9 @@ export default function hetero_feature_selection(
         if (selected_mask && !isUndefined(selected_mask[variable])) {
           row._filter = !selected_mask[variable];
         }
-        toMetricsData.push(row);
+        if (cursor < 0) {
+          toMetricsData.push(row);
+        }
       }
       tHeader[current] = toMetricsHeader;
       tData[current] = toMetricsData;
@@ -90,15 +93,15 @@ export default function hetero_feature_selection(
         prop: method,
       });
       for (const variable in selected_mask) {
-        const row: any = {};
-        row['variable'] = variable;
-        row[method] = '-';
-        row._filter = !selected_mask[variable];
         const cursor = toMethodData.findIndex(
           (item: any) => item['variable'] === variable
         );
-        if (cursor >= 0) {
-          Object.assign(toMethodData[cursor], row);
+        const row: any = cursor < 0 ? {} : toMethodData[cursor];
+        row['variable'] = variable;
+        row[method] = '-';
+        row._filter = !selected_mask[variable];
+        if (cursor < 0) {
+          toMethodData.push(row)
         }
       }
       tHeader[current] = toMethodHeader;
@@ -117,7 +120,10 @@ export default function hetero_feature_selection(
         const toHostData = tData[option] || [];
         const toHostHeader = tHeader[option] || [...defaultHeader];
         for (const variable in all_host_selected_mask[option]) {
-          const row: any = {};
+          const cursor = toHostData.findIndex(
+            (item: any) => item['variable'] === variable
+          );
+          const row: any = cursor < 0 ? {} : toHostData[cursor];
           row['variable'] = variable;
           for (const col in all_host_metrics[option][variable]) {
             if (!toHostHeader.some((item: any) => item.prop === col)) {
@@ -135,13 +141,8 @@ export default function hetero_feature_selection(
           if (selected_mask && !isUndefined(selected_mask[variable])) {
             row._filter = !selected_mask[variable];
           }
-
-          const cursor = toHostData.findIndex(
-            (item: any) => item['variable'] === variable
-          );
-          if (cursor >= 0) {
-            Object.assign(toHostData[cursor], row);
-          } else {
+          
+          if (cursor < 0) {
             toHostData.push(row)
           }
         }
diff --git a/resources-front-end/packages/fate-board/src/views/dashboard/Information/Information.vue b/resources-front-end/packages/fate-board/src/views/dashboard/Information/Information.vue
index ff844606..206c147d 100644
--- a/resources-front-end/packages/fate-board/src/views/dashboard/Information/Information.vue
+++ b/resources-front-end/packages/fate-board/src/views/dashboard/Information/Information.vue
@@ -3,39 +3,46 @@
     <article class="f-dashboard-dataset--title">Parties info</article>
 
     <section class="f-dashboard-dataset--main">
-      <el-row
-        v-for="(item, index) in parties"
-        :gutter="24"
-        class="f-dashboard-dataset--row"
-      >
-        <el-col :span="6">
-          <FRow
-            :label="'Role'"
-            :labelClassName="'f-dashboard-dataset--label'"
-            :content="item.role"
-            :contentClassName="'f-dashboard-dataset--content'"
-          ></FRow>
-        </el-col>
-        <el-col :span="14">
-          <FRow
-            :label="'PartyId'"
-            :labelClassName="'f-dashboard-dataset--label'"
-            :content="(item.party_id || []).join(', ')"
-            :contentClassName="'f-dashboard-dataset--content'"
-          ></FRow>
-        </el-col>
-      </el-row>
+      <template v-for="(item, key) in dataset">
+        <el-row
+          :gutter="24"
+          class="f-dashboard-dataset--row f-dashboard-dataset--subtitle"
+        >
+          <el-col :span="8"><article class="f-dashboard-dataset--label">{{ capitalize(key.toString() || '') }}</article></el-col>
+          <el-col :span="16"><article class="f-dashboard-dataset--label">Dataset</article></el-col>
+        </el-row>
+        <template v-for="(namespace, partyid) in item">
+          <el-row
+            :gutter="24"
+            class="f-dashboard-dataset--row"
+          >
+            <el-col :span="8">
+              <article class="f-dashboard-dataset--content">{{ partyid }}</article>
+            </el-col>
+            <el-col :span="16">
+              <article class="f-dashboard-dataset--column">
+                <article
+                  v-for="(name, index) in namespace"
+                  class="f-dashboard-dataset--content">
+                  {{ `${name.namespace}.${name.name}` }}
+                </article>
+              </article>
+            </el-col>
+          </el-row>
+        </template>
+      </template>
     </section>
   </article>
 </template>
 
 <script lang="ts" setup>
+import { capitalize } from 'lodash';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 
 const store = useStore();
 
-const parties = computed(() => store.state.job.dataset.parties || []);
+const dataset = computed(() => store.state.job.dataset.dataset || {});
 </script>
 
 <style lang="scss" scoped>
@@ -66,11 +73,16 @@ const parties = computed(() => store.state.job.dataset.parties || []);
     flex: 2 2 calc(100% - 18px - $pale);
     max-height: calc(100% - 18px - $pale);
     background-color: var(--el-bg-color);
+    overflow-y: auto;
+    overflow-x: hidden;
   }
   
   .f-dashboard-dataset--row {
 
-    padding: $pale;
+    padding: math.div($pale, 2) $pale;
+    &:first-child {
+      padding-top: $pale * 2;
+    }
 
     :deep(.f-dashboard-dataset--label) {
       @include font-title();
@@ -80,6 +92,18 @@ const parties = computed(() => store.state.job.dataset.parties || []);
       @include font-text();
       font-weight: bold;
     }
+
+    .f-dashboard-dataset--column {
+      @include flex-col();
+    }
+  }
+
+  .f-dashboard-dataset--subtitle {
+    margin-top: $pale;
+
+    &:first-child{
+      margin-top: 0;
+    }
   }
 }
 </style>
diff --git a/resources-front-end/packages/fate-board/src/views/dashboard/Log/Log.vue b/resources-front-end/packages/fate-board/src/views/dashboard/Log/Log.vue
index 0e736bcd..59aa580e 100644
--- a/resources-front-end/packages/fate-board/src/views/dashboard/Log/Log.vue
+++ b/resources-front-end/packages/fate-board/src/views/dashboard/Log/Log.vue
@@ -40,7 +40,7 @@
             v-if="(counts as any)[key] > 0"
             class="f-log-subtab-count"
             :class="`f-log-${item}-total`"
-            >({{ (counts as any)[key] }})</span
+            >{{ (counts as any)[key] }}</span
           >
         </div>
       </div>
@@ -474,6 +474,7 @@ export default {
           line-height: 16px;
           text-align: center;
           color: #fff;
+          // font-weight: bold;
         }
       }
 
@@ -482,6 +483,9 @@ export default {
         .f-log-subtab-content {
           color: var(--el-color-primary);
         }
+        .f-log-subtab-count {
+          font-weight: normal;
+        }
       }
     }
     .f-log-containers {
@@ -496,19 +500,19 @@ export default {
     }
 
     .f-log-error-total {
-      color: var(--el-color-error) !important;
+      background-color: var(--el-color-error) !important;
     }
 
     .f-log-warning-total {
-      color: var(--el-color-warning) !important;
+      background-color: var(--el-color-warning) !important;
     }
 
     .f-log-info-total {
-      color: var(--el-color-info) !important;
+      background-color: var(--el-color-success) !important;
     }
 
     .f-log-debug-total {
-      color: var(--el-color-primary) !important;
+      background-color: var(--el-color-primary) !important;
     }
   }
   .f-log-expended {
diff --git a/resources-front-end/packages/fate-board/src/views/detail/Detail.vue b/resources-front-end/packages/fate-board/src/views/detail/Detail.vue
index 3bfbc472..8538b15a 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/Detail.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/Detail.vue
@@ -43,8 +43,9 @@ const jobDataset = computed(() => store.state.job.dataset?.dataset)
 const btnDisable = ref(true)
 
 const componentChoose = async (comp?: any) => {
-  parameter.value.getParameter(comp)
+  await parameter.value.getParameter(comp)
   btnDisable.value = false
+  dialog.value.refreshed()
 }
 
 const componentRetry = (retryd: boolean) => {
diff --git a/resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue b/resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue
index 561f325a..5635bee2 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue
@@ -56,8 +56,8 @@ onBeforeMount(() => {
   modelComponent();
 });
 
-const refreshing = () => {
-  store.dispatch('modelRefresh')
+const refreshing = async () => {
+  await store.dispatch('modelRefresh')
 }
 defineExpose({
   refresh: refreshing
diff --git a/resources-front-end/packages/fate-board/src/views/detail/Information/outputs.vue b/resources-front-end/packages/fate-board/src/views/detail/Information/outputs.vue
index ac58650c..5ff3a126 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/Information/outputs.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/Information/outputs.vue
@@ -9,7 +9,7 @@
     :modal="false"
     class="f-output-dialog"
   >
-    <section class="f-detail-container">
+    <section v-loading="loading" class="f-detail-container">
       <section class="f-detail-operation">
         <el-link :icon="Refresh" type="primary" class="f-d-refresh" @click="refreshing">Refresh</el-link>
       </section>
@@ -44,6 +44,7 @@ const active = ref('model');
 
 const store = useStore();
 
+const loading = ref(true)
 const component = computed(() => store.state.comp.information.name);
 const compType = computed(() => store.state.comp.information.type);
 const firstModelLabel = computed(() => {
@@ -77,15 +78,19 @@ const firstModelLabel = computed(() => {
 const model = ref()
 const data = ref()
 const log = ref()
-const refreshing = () => {
+const refreshing = async () => {
+  loading.value = true
   if (model.value)
-    model.value.refresh()
+    await model.value.refresh()
   if (data.value)
-    data.value.refresh()
+    await data.value.refresh()
   if (log.value)
-    log.value.refresh()
+    await log.value.refresh()
   emits('refresh')
 }
+const refreshed = () => {
+  loading.value = false
+}
 
 const on = () => {
   display.value = true;
@@ -97,6 +102,7 @@ const off = () => {
 defineExpose({
   on,
   off,
+  refreshed
 });
 </script>
 
diff --git a/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Dataset.vue b/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Dataset.vue
index af58393f..3f851995 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Dataset.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Dataset.vue
@@ -27,7 +27,7 @@
           <template #reference>
             <section class="f-dataset-popover">
               <span>{{ Object.keys(other).length }}</span>
-              <el-link type="primary">view</el-link>
+              <el-link type="primary" class="f-dataset-view">view</el-link>
             </section>
           </template>
 
@@ -171,6 +171,8 @@ watch(
 
   .f-dataset-popover {
     @include flex-row();
+    align-items: center;
+    justify-content: flex-start;
     @include text-size-small();
     color: var(--el-color-info-dark-2);
 
@@ -178,6 +180,10 @@ watch(
       padding-right: $pale;
     }
   }
+
+  .f-dataset-view {
+    @include text-size-small();
+  }
 }
 
 .f-dataset-content {
diff --git a/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Download.vue b/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Download.vue
index 94637caf..c9074c14 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Download.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/jobSummary/Download.vue
@@ -48,7 +48,7 @@ const download = () => {
     cursor: pointer;
     :deep(.f-summary-link)   {
       @include text-size-small();
-      color: var(--el-color-primary-light-3);
+      color: var(--el-color-primary);
     }
   }
   
diff --git a/resources-front-end/packages/fate-board/src/views/history/table/Table.vue b/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
index fdfbefee..8881ebee 100644
--- a/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
+++ b/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
@@ -7,6 +7,7 @@
     :current="parameter.pageNum"
     :size="parameter.pageSize"
     :total="total"
+    :layout="'total, sizes, prev, pager, next'"
     position="center"
     class="f-history-table"
     @sizeChange="sizeChange"
diff --git a/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue b/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue
index d62dee50..8c0abe8c 100644
--- a/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue
+++ b/resources-front-end/packages/fate-board/src/views/layout/GlobalLayout.vue
@@ -54,4 +54,14 @@ import LayoutHeader from './LayoutHeader.vue';
     @include padding-pale(0, 0);
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0
+}
 </style>
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
index c3347b0c..51408e05 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
+++ b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="fb-table">
     <Columns
-      :data="currentData"
-      :header="currentHeader"
+      :data="currentData()"
+      :header="currentHeader()"
       :row-class-name="rowClassName"
       :cell-class-name="cellClassName"
       :current-page="currentPage"
@@ -22,7 +22,7 @@
       v-model:page-size="pageSize"
       hide-on-single-page
       :small="true"
-      :layout="layout || 'total, sizes, prev, pager, next'"
+      :layout="layout || 'total, prev, pager, next'"
       :total="currentTotal"
       background
       class="fb-table-pagination"
@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { ElPagination } from 'element-plus';
 import { isNumber } from 'lodash';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import Columns from './columns/index.vue';
 
 const props = defineProps([
@@ -77,23 +77,25 @@ const pageSize = ref(props.column
   ? Number(props.size) || 10
   : Number(props.size) || 20
 );
-const currentHeader = computed(() => props.column && props.header
+const currentHeader = () => props.column && props.header
   ? props.header.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
   : props.header
-);
-const currentData = computed(() => {
+
+const currentData = () => {
   return (!props.column && props.total !== undefined && props.total !== false && props.data.length > pageSize.value && props.data)
     ? props.data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
     : props.data
   }
-)
+
 const refresh = ref(0)
 
 watch(
   () => props.header,
   () => {
     currentPage.value = 1;
-    // refresh.value++
+    nextTick(() => {
+      refresh.value++
+    })
   },
   { deep: true }
 );
diff --git a/resources-front-end/packages/fate-visualization/html/main.ts b/resources-front-end/packages/fate-visualization/html/main.ts
index f06f09e5..9a2a3845 100644
--- a/resources-front-end/packages/fate-visualization/html/main.ts
+++ b/resources-front-end/packages/fate-visualization/html/main.ts
@@ -3,8 +3,8 @@ import 'element-plus/dist/index.css';
 import { createApp } from 'vue';
 import * as Visual from '../lib/main';
 // import App from './LineOrBarApp.vue';
-import App from './DAGGraphicApp.vue';
-// import App from './HeatMap.vue';
+// import App from './DAGGraphicApp.vue';
+import App from './HeatMap.vue';
 // import App from './Tree.vue';
 // import App from './Gauge.vue';
 
diff --git a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue
index 0304c048..2c94f110 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue
@@ -105,7 +105,7 @@ function zoomOut() {
 
 function fullScreen() {
   if (DAGInstance) {
-    // DAGInstance.fullScreen()
+    DAGInstance.fullScreen()
   }
 }
 
diff --git a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts
index a391e1c9..d1e009bc 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts
@@ -38,11 +38,7 @@ export default class DAG {
   containerWidth: number = 0;
   containerHeight: number = 0;
 
-  // containerTransition = {
-  //   x: 0,
-  //   y: 0,
-  //   k: 1,
-  // };
+  containerTransition: any
   zoomMin = 0.1;
   zoomMax = 3;
   // containerTranform = throttle((attrs: any) => {
@@ -91,35 +87,75 @@ export default class DAG {
       .append('svg')
       .attr('id', 'dag_container')
       .attr('overflow', 'visible')
+      .attr('style', 'transform-origin: 0px 0px;')
       .attr('width', this.containerWidth)
       .attr('height', this.containerHeight);
   }
 
   protected $zoom() {
-    this.zoomRelative = this.centerForParent()
+    this.containerTransition = zoomIdentity
     this.zoomInstance = zoom()
       .scaleExtent([this.zoomMin, this.zoomMax])
-      .on('zoom', () => {
+      .on('zoom', (event: any) => {
         this.container.attr(
           'transform', zoomTransform(this.container.node()))
       });
     this.parent.call(this.zoomInstance).on('dblclick.zoom', null);
   }
 
-  protected centerForParent () {
-    return [
-      this.parent.node().clientWidth / 2,
-      this.parent.node().clientHeight / 2
-    ]
-  }
-
   zoomIn(times?: number) {
-    const transform = zoomIdentity.scale(times || 0.95)
+    const box = this.container.node().getBoundingClientRect()
+    const center = [box.width / 2 , box.height / 2]
+    const transform = zoomTransform(this.container.node()).scale(times || 0.95)
+    const toK = times || 0.95
+    const transformx = center[0] * (1 - toK)
+    const transformy = center[1] * (1 - toK)
+    transform.x += transformx
+    transform.y += transformy
     this.parent.transition().call(this.zoomInstance.transform, transform)
   }
 
   zoomOut(times?: number) {
-    const transform = zoomIdentity.scale(times || 1.05)
+    const box = this.container.node().getBoundingClientRect()
+    const center = [box.width / 2 , box.height / 2]
+    const transform = zoomTransform(this.container.node()).scale(times || 1.05)
+    const toK = times || 1.05
+    const transformx = center[0] * (1 - toK)
+    const transformy = center[1] * (1 - toK)
+    transform.x += transformx
+    transform.y += transformy
+    this.parent.transition().call(this.zoomInstance.transform, transform)
+  }
+
+  fullScreen () {
+    // 中位点
+    const containerBox = this.parent.node().getBoundingClientRect()
+    const center = [containerBox.width / 2, containerBox.height / 2]
+
+    // 当前变换信息
+    const transform = zoomTransform(this.container.node())
+
+    // 上层padding位置
+    const fromTop = 30 * transform.k
+
+    // 框选子组件
+    const range = new Range()
+    range.selectNodeContents(this.container.node())
+
+    const contentBox = range.getBoundingClientRect()
+    let times = Math.min(
+      containerBox.width / ((contentBox.width + fromTop * 2) / transform.k),
+      containerBox.height / ((contentBox.height + fromTop * 2) / transform.k))
+    if (times < 1) {
+      times = Math.min(times, this.zoomMin)
+      transform.k = times
+      transform.x = center[0] * (1 - times)
+      transform.y = center[1] * (1 - times)
+    } else {
+      transform.k = 1
+      transform.x = 0
+      transform.y = 0
+    }
     this.parent.transition().call(this.zoomInstance.transform, transform)
   }
 
diff --git a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/explainDeps.ts b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/explainDeps.ts
index 32532a03..7d241fe9 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/explainDeps.ts
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/explainDeps.ts
@@ -122,7 +122,7 @@ export default function explainDependencies(data: any, containerWidth: number) {
     levels[cursor - 1].push(comp);
   }
 
-  let fromy = 50;
+  let fromy = 30;
   for (const level of levels) {
     const countWidth = level.reduce(
       (pre: number, value: object) => pre + (value as any).width + 100 + 10,
diff --git a/resources-front-end/packages/fate-visualization/lib/HeatMap/HeatMap.vue b/resources-front-end/packages/fate-visualization/lib/HeatMap/HeatMap.vue
index 9e46f8e9..8dba6763 100644
--- a/resources-front-end/packages/fate-visualization/lib/HeatMap/HeatMap.vue
+++ b/resources-front-end/packages/fate-visualization/lib/HeatMap/HeatMap.vue
@@ -11,7 +11,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
 import dataFormat from './dataFormat';
 import options from './explain';
 
-const props = defineProps(['title', 'x', 'y', 'data', 'min', 'max', 'pearson']);
+const props = defineProps(['title', 'x', 'y', 'data', 'min', 'max', 'pearson', 'ext']);
 const container = ref();
 let displayLabel = false
 let resize: any;
@@ -53,7 +53,8 @@ function optionParsing () {
           show: displayLabel
         }
       }
-    })
+    }),
+    props.ext || {}
   );
 }