From b98b9431aec778fa2bea6828a00bfb59013e7c80 Mon Sep 17 00:00:00 2001
From: ArvinHuang <1095369685@qq.com>
Date: Fri, 15 Dec 2023 18:51:23 +0800
Subject: [PATCH] update: 1. heartbeat for running list. 2. running status. 3.
 pearson display. 4. refresh operation for detail. 5. homo_lr component
 supported.

Signed-off-by: ArvinHuang <1095369685@qq.com>
---
 .../src/components/Pearson/Pearson.vue        |   4 +
 .../fate-board/src/store/modules/comp.ts      |  18 ++-
 .../fate-board/src/store/modules/job.ts       |  21 ++--
 .../fate-board/src/transform/index.ts         |   2 +-
 .../fate-board/src/transform/metric/loss.ts   |  38 ++++--
 .../transform/model/feature_correlation.ts    |   4 +-
 .../fate-board/src/transform/model/homo_lr.ts |  97 ++++++++++++++-
 .../fate-board/src/transform/style.scss       |  18 +--
 .../fate-board/src/transform/tools/toTable.ts |   4 +-
 .../src/views/dashboard/Gauge/Gauge.vue       |   6 +-
 .../fate-board/src/views/detail/Detail.vue    |   4 +-
 .../views/detail/Information/DataOutput.vue   |  15 +++
 .../views/detail/Information/LogOutput.vue    |  19 +++
 .../views/detail/Information/ModelOutput.vue  |  68 +++++++++++
 .../src/views/detail/Information/outputs.vue  | 110 +++++++++---------
 .../src/views/history/filter/Filter.vue       |   4 +-
 .../fate-board/src/views/running/Running.vue  |   2 +-
 .../lib/UIParse/AST/dataAsync.ts              |   7 ++
 .../fate-ui-component/lib/UIParse/AST/node.ts |   6 +
 .../fate-ui-component/lib/UIParse/nodeVue.ts  |   6 +
 .../lib/UIParse/utils/Tree.ts                 |  11 ++
 .../VirtualScroll/VirtualScroll.vue           |  18 ---
 .../VirtualScroll/VirtualScrollItem.vue       |   6 +-
 .../fate-visualization/html/DAGGraphicApp.vue |  13 ++-
 .../packages/fate-visualization/html/main.ts  |   4 +-
 .../fate-visualization/lib/DAGGraphic/DAG.vue |   4 +-
 .../lib/DAGGraphic/DAGContainer.ts            |   2 +-
 .../lib/DAGGraphic/component/configuration.ts |   1 +
 .../lib/DAGGraphic/runningStage.ts            |   5 +-
 29 files changed, 383 insertions(+), 134 deletions(-)
 create mode 100644 resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue

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 bd6a4510..228226ba 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
@@ -162,6 +162,10 @@ watch(
     width: calc(100% - 450px);
     min-height: 600px;
     @include flex-col();
+    padding: 0px $pale;
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-color-info-light-9);
+    border-radius: 2px;
   }
 
   .f-p-map-header {
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 c39d817f..00a79eab 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
@@ -82,8 +82,10 @@ export default {
   },
 
   actions: {
-    async chooseComp({ state, commit, dispatch }: any, comp: any) {
-      commit('SET_INFORMATION', comp);
+    async chooseComp({ state, commit, dispatch }: any, comp?: any) {
+      if (comp) {
+        commit('SET_INFORMATION', comp);
+      }
       await dispatch('parameterRequest');
       await dispatch('modelRequest');
       await dispatch('metricRequest');
@@ -131,7 +133,7 @@ export default {
 
     async modelRequest({ state, commit, dispatch }: any) {
       try {
-        if (!state.hasLoaded[state.information.name] || !state.hasLoaded[state.information.name].configuration) {
+        if (!state.hasLoaded[state.information.name] || !state.hasLoaded[state.information.name].instance) {
           const job_id = await dispatch('GET_JOBID');
           const party_id = await dispatch('GET_PARTYID');
           const role = await dispatch('GET_JOB_ROLE');
@@ -150,7 +152,7 @@ export default {
 
     async metricRequest({ state, commit, dispatch }: any) {
       try {
-        if (!state.hasLoaded[state.information.name] || !state.hasLoaded[state.information.name].configuration) {
+        if (!state.hasLoaded[state.information.name] || !state.hasLoaded[state.information.name].instance) {
           const job_id = await dispatch('GET_JOBID');
           const party_id = await dispatch('GET_PARTYID');
           const role = await dispatch('GET_JOB_ROLE');
@@ -167,6 +169,14 @@ export default {
       }
     },
 
+    modelRefresh ({ state }: any) {
+      const component = state.information.name
+      if (component && state.hasLoaded[component]) {
+        state.hasLoaded[component].instance?.release()
+        delete state.hasLoaded[component]
+      }
+    },
+
     setLoader({ state, commit }: any, instance: any) {
       const name = state.information.name;
       if (name) {
diff --git a/resources-front-end/packages/fate-board/src/store/modules/job.ts b/resources-front-end/packages/fate-board/src/store/modules/job.ts
index 58e46abd..2816b96b 100644
--- a/resources-front-end/packages/fate-board/src/store/modules/job.ts
+++ b/resources-front-end/packages/fate-board/src/store/modules/job.ts
@@ -2,7 +2,7 @@ import API from '@/api';
 import dagExplaination from '@/utils/dagExplaination';
 import { ElMessage } from 'element-plus';
 import { WSConnect } from 'fate-tools';
-import { merge } from 'lodash';
+import { merge, throttle } from 'lodash';
 
 export default {
   state: {
@@ -46,18 +46,17 @@ export default {
   actions: {
     async JOB_INFORMATION({ state, commit }: any) {
       if (state._ws_) return true;
+
+      // 首次加载标识
+      let firstTimeHandle = true
       const handler = (data: any) => {
         dagExplaination(data.dependency_data, (res: any) => {
-          if (Object.keys(state.dag).length > 0) {
-
-          } else {
-            commit('SET_DAG', res)
-          }
+          commit('SET_DAG', res)
         })
         commit('SET_DATASET', data.summary_date.dataset);
         commit('SET_DETAILS', data.summary_date.job);
         if (data.status && !data.status.match(/running|waiting/)) {
-          if (!state._rerun_) {
+          if (!state._rerun_ && state._ws_) {
             state._ws_.close()
             commit('SET_WS', undefined)
           }
@@ -65,6 +64,7 @@ export default {
           if (state._rerun_) state._rerun_ = false
         }
       };
+      const throttleHandler = throttle(handler, 10000)
       if (!state.role || !state.jobId || !state.partyId) {
         return false;
       } else {
@@ -75,7 +75,12 @@ export default {
           let data;
           try {
             data = JSON.parse(event.data);
-            handler(data);
+            if (firstTimeHandle) {
+              handler(data);
+              firstTimeHandle = false
+            } else {
+              throttleHandler(data)
+            }
           } catch (error) {
             state._ws_.close();
             data = null;
diff --git a/resources-front-end/packages/fate-board/src/transform/index.ts b/resources-front-end/packages/fate-board/src/transform/index.ts
index e541fbad..a73dd52b 100644
--- a/resources-front-end/packages/fate-board/src/transform/index.ts
+++ b/resources-front-end/packages/fate-board/src/transform/index.ts
@@ -16,7 +16,7 @@ export default function explain (
     id: 'ComponentDetailContainer',
     tag: 'article',
     prop: {
-      class: 'f-detail-component',
+      class: 'f-detail-component f-d-seperator',
     },
     children: (() => {
       const children: any = []
diff --git a/resources-front-end/packages/fate-board/src/transform/metric/loss.ts b/resources-front-end/packages/fate-board/src/transform/metric/loss.ts
index a3f999e8..40de1b0f 100644
--- a/resources-front-end/packages/fate-board/src/transform/metric/loss.ts
+++ b/resources-front-end/packages/fate-board/src/transform/metric/loss.ts
@@ -8,22 +8,37 @@ export default function Loss (
   const configuration = {
     xAxis: {
       type: 'category',
+      name: 'epoch'
     },
     yAxis: {
       type: 'value',
       name: 'loss'
     },
-    series:[{
-      type: 'line',
-      name: 'loss',
-      data: (() => {
-        const list = []
-        for (const each of data) {
-          list.push(fixed(each.metric))
+    series: (() => {
+      let cursor = 0
+      const result = []
+      const pointers = <any>[]
+      for (const each of data) {
+        if (each.step === 0 && pointers.length > 0) {
+          result.push({
+            type: 'line',
+            name: `loss_${cursor ++}`,
+            data: [...pointers]
+          })
+          pointers.length = 0
         }
-        return list
-      })()
-    }]
+        pointers.push([each.step, fixed(each.metric)])
+      }
+      if (pointers.length > 0) {
+        result.push({
+          type: 'line',
+          name: `loss_${cursor}`,
+          data: [...pointers]
+        })
+        pointers.length = 0
+      }
+      return result
+    })()
   }
 
   return {
@@ -31,7 +46,8 @@ export default function Loss (
     tag: FLine,
     prop: {
       title: 'Loss',
-      data: configuration
+      data: configuration,
+      legend: 1
     }
   }
 }
\ 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 6e132712..7e0f917d 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
@@ -24,7 +24,7 @@ export default function feature_correlation (
   }]
   let tdata = []
 
-  const hasAnony = Object.keys(column_anonymous_map).length > 0
+  const hasAnony = Object.keys(column_anonymous_map || {}).length > 0
   if (hasAnony) {
     theader.push({
       label: 'anonym',
@@ -60,7 +60,7 @@ export default function feature_correlation (
     }
   }
 
-  let remote_key = Object.keys(remote_corr)
+  let remote_key = Object.keys(remote_corr || {})
   if (remote_key && remote_key.length > 0) {
     remote_key = sort(remote_key)
   }
diff --git a/resources-front-end/packages/fate-board/src/transform/model/homo_lr.ts b/resources-front-end/packages/fate-board/src/transform/model/homo_lr.ts
index 494b8932..3375e655 100644
--- a/resources-front-end/packages/fate-board/src/transform/model/homo_lr.ts
+++ b/resources-front-end/packages/fate-board/src/transform/model/homo_lr.ts
@@ -1,4 +1,8 @@
+import fixed from "../tools/fixed";
 import getModelData from "../tools/getModelData";
+import toSelect from "../tools/toSelect";
+import toTable from "../tools/toTable";
+import toText from "../tools/toText";
 
 export default function HomoLr (
   modelData: object,
@@ -12,9 +16,98 @@ export default function HomoLr (
 
   const { param, meta } = modelInstance.train_output_model;
   const { ovr, max_iter } = meta
-  const { state_dict, label_num, feature_num } = param.model
+  const { state_dict, label_num, feature_num, model_name } = param.model
   const isGuest = role.match(/guest/i)
   const isHost = role.match(/host/i)
 
-  if (ovr) {}
+  const options = <any>[]
+  const theader = [{
+    label: 'variable',
+    prop: 'variable'
+  }, {
+    prop: 'weight',
+    label: 'weight',
+    sortable: true,
+  }]
+  const tBias = <any>{}
+  const tData = <any>{}
+  
+  for (const key in state_dict) {
+    const [ _model, modelLabel, parameter ] = key.split('.')
+    const optionIndex = options.findIndex((item: any) => item.prop === modelLabel)
+    if (optionIndex < 0) {
+      options.push({
+        label: `model_${modelLabel}`,
+        prop: modelLabel
+      })
+    }
+    if (parameter.match(/bias/i)) {
+      tBias[modelLabel] = fixed(state_dict[key][0])
+    } else if (parameter.match(/weight/i)) {
+      const tDataForModel = []
+      for (let i = 0 ; i < state_dict[key][0].length; i++) {
+        tDataForModel.push({
+          variable: model_name?.[i] || `x${i}`,
+          weight: fixed(state_dict[key][0][i])
+        })
+      }
+      tData[modelLabel] = tDataForModel
+    }
+  }
+
+  const homo_lr = {
+    id: 'LRModelContainer',
+    tag: 'section',
+    prop: { class: 'f-d-container f-d-margin' },
+    children: <any[]>[],
+  };
+  const hasSelection = options && options.length > 1;
+
+  if (hasSelection) {
+    homo_lr.children.push(
+      toSelect('LROVRSelection', options, {
+        placeholder: '',
+        label: 'one_vs_rest model',
+      }),
+      toText(
+        {
+          request: (value: any) => {
+            const index =  options.findIndex((item: any) => item.prop === value)
+            return options[index].label
+          },
+          parameter: ['LROVRSelection.modelValue'],
+        },
+        'Model Label'
+      )
+    );
+  }
+
+  homo_lr.children.push(
+    toText(
+      hasSelection ? {
+        request: (value: any) => {
+          return tBias[value];
+        },
+        parameter: ['LROVRSelection.modelValue'],
+      } : tBias[options[0].prop],
+      'Bias'
+    )
+  )
+
+  homo_lr.children.push(
+    toTable(
+      theader,
+      hasSelection ? {
+        request: (value: any) => {
+          return tData[value]
+        },
+        parameter: ['LROVRSelection.modelValue'],
+      } : tData[options[0].prop],
+      {
+        index: true
+      }
+    )
+  )
+
+  return homo_lr
 }
\ No newline at end of file
diff --git a/resources-front-end/packages/fate-board/src/transform/style.scss b/resources-front-end/packages/fate-board/src/transform/style.scss
index e370fb0d..5691a2a8 100644
--- a/resources-front-end/packages/fate-board/src/transform/style.scss
+++ b/resources-front-end/packages/fate-board/src/transform/style.scss
@@ -1,18 +1,22 @@
 @import '@/style/index.scss';
 
+.f-d-seperator {
+  & > * {
+    margin-bottom: $pale * 3;
+    border-bottom: 1px solid var(--el-color-info-light-7);
+
+    &:last-child {
+      border: 0px;
+    }
+  }
+}
+
 .f-detail-component {
   width: 100%;
   @include flex-col();
   align-items: flex-start;
   justify-content: flex-start;
 
-  .f-d-seperator {
-    & > * {
-      margin-bottom: $pale * 3;
-      border-bottom: 1px solid var(--el-color-info-light-7);
-    }
-  }
-
   .f-d-margin {
     & > * {
       margin-bottom: $pale;
diff --git a/resources-front-end/packages/fate-board/src/transform/tools/toTable.ts b/resources-front-end/packages/fate-board/src/transform/tools/toTable.ts
index 1d8975ae..62747706 100644
--- a/resources-front-end/packages/fate-board/src/transform/tools/toTable.ts
+++ b/resources-front-end/packages/fate-board/src/transform/tools/toTable.ts
@@ -7,9 +7,11 @@ export default function toTable(header: any, data: any, ext?: any) {
     tag: FTable,
     prop: Object.assign({
       class: 'f-d-table',
-      maxHeight: '400px',
+      maxHeight: '450px',
       header,
       data,
+      size: 10,
+      total: true
     }, ext || {}),
   };
 }
diff --git a/resources-front-end/packages/fate-board/src/views/dashboard/Gauge/Gauge.vue b/resources-front-end/packages/fate-board/src/views/dashboard/Gauge/Gauge.vue
index d9d8028c..989f1e76 100644
--- a/resources-front-end/packages/fate-board/src/views/dashboard/Gauge/Gauge.vue
+++ b/resources-front-end/packages/fate-board/src/views/dashboard/Gauge/Gauge.vue
@@ -61,19 +61,19 @@ const toDetail = () => {
 const elapsed = () => {
   let elapsed: any = store.state.job.details.fElapsed
   if (!elapsed) {
-    elapsed = Math.floor((store.state.job.details.fStartTime ? (new Date().getTime() - store.state.job.details.fStartTime) : 0) / 1000)
+    elapsed = Math.floor((store.state.job.details.fStartTime ? (new Date().getTime() - store.state.job.details.fStartTime) : 0))
   }
   duration.value = elapsed
 }
 const elapsing = () => {
   setTimeout(() => {
     if (status.value.match(/running/i)) {
-      duration.value += 1
+      duration.value += 1000
       elapsing()
     } else {
       elapsed()
     }
-  }, 950)
+  }, 1000)
 }
 
 watch(
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 d603f0e7..3bfbc472 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
@@ -22,7 +22,7 @@
     </section>
   </div>
 
-  <OutputDialog ref="dialog"/>
+  <OutputDialog ref="dialog" @refresh="componentChoose"/>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +42,7 @@ const jobData = computed(() => store.state.job.details);
 const jobDataset = computed(() => store.state.job.dataset?.dataset)
 const btnDisable = ref(true)
 
-const componentChoose = async (comp: any) => {
+const componentChoose = async (comp?: any) => {
   parameter.value.getParameter(comp)
   btnDisable.value = false
 }
diff --git a/resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue b/resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue
index 5c114386..6a034356 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue
@@ -95,9 +95,24 @@ watch(
   { deep: true }
 );
 
+watch(
+  () => store.state.comp.information,
+  () => {
+    dataRequest()
+  },
+  { deep: true }
+)
+
 onMounted(async () => {
   await dataRequest();
 });
+
+const refreshing = () => {
+  dataRequest()
+}
+defineExpose({
+  refresh: refreshing
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources-front-end/packages/fate-board/src/views/detail/Information/LogOutput.vue b/resources-front-end/packages/fate-board/src/views/detail/Information/LogOutput.vue
index c73b18a8..6e833c8f 100644
--- a/resources-front-end/packages/fate-board/src/views/detail/Information/LogOutput.vue
+++ b/resources-front-end/packages/fate-board/src/views/detail/Information/LogOutput.vue
@@ -171,6 +171,16 @@ watch(
   }
 )
 
+watch(
+  () => store.state.comp.information,
+  () => {
+    clearData()
+    closeSocket()
+    initLogSocket()
+  },
+  { deep: true }
+)
+
 onBeforeMount(async () => {
   await initLogSocket()
 })
@@ -180,6 +190,15 @@ onBeforeUnmount(() => {
   closeSocket()
 })
 
+const refreshing = () => {
+  clearData()
+  closeSocket()
+  initLogSocket()
+}
+defineExpose({
+  refresh: refreshing()
+})
+
 </script>
 
 <style lang="scss" scoped>
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
new file mode 100644
index 00000000..561f325a
--- /dev/null
+++ b/resources-front-end/packages/fate-board/src/views/detail/Information/ModelOutput.vue
@@ -0,0 +1,68 @@
+<template>
+  <component
+    :is="componentInstance"
+    :key="update"
+    class="f-detail-item-content"
+  ></component>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onBeforeMount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+
+const componentInstance: any = ref(undefined);
+const update = ref(0);
+
+const store = useStore();
+const component = computed(() => store.state.comp.information.name);
+let unloaded = false;
+
+const modelComponent = () => {
+  componentInstance.value = undefined;
+  if (component.value) {
+    componentInstance.value = defineAsyncComponent(async () => {
+      const config = store.state.comp.hasLoaded[component.value];
+      if (config && config.instance) {
+        return config.instance.toVue();
+      } else {
+        unloaded = true;
+        return {};
+      }
+    });
+    update.value++;
+  }
+};
+
+watch(
+  () => store.state.comp.hasLoaded,
+  () => {
+    if (store.state.comp.hasLoaded[component.value] && unloaded) {
+      modelComponent();
+      unloaded = false;
+    }
+  },
+  { deep: true }
+);
+
+watch(
+  () => component.value,
+  () => {
+    modelComponent();
+  },
+  { deep: true }
+);
+
+onBeforeMount(() => {
+  modelComponent();
+});
+
+const refreshing = () => {
+  store.dispatch('modelRefresh')
+}
+defineExpose({
+  refresh: refreshing
+})
+
+</script>
+
+<style lang="scss" scoped></style>
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 b5c6820b..ac58650c 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,29 +9,34 @@
     :modal="false"
     class="f-output-dialog"
   >
-    <el-tabs v-model="active" class="f-detail-tabs">
-      <el-tab-pane :label="firstModelLabel" name="model" class="f-detail-item">
-        <component
-          :is="componentInstance"
-          :key="update"
-          class="f-detail-item-content"
-        ></component>
-      </el-tab-pane>
-      <el-tab-pane label="data" name="data" :lazy="true" class="f-detail-item">
-        <DataOutput class="f-detail-item-content"></DataOutput>
-      </el-tab-pane>
-      <el-tab-pane label="log" name="log" :lazy="true" class="f-detail-item">
-        <LogOutput class="f-detail-item-content"></LogOutput>
-      </el-tab-pane>
-    </el-tabs>
+    <section 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>
+      <el-tabs v-model="active" class="f-detail-tabs">
+        <el-tab-pane :label="firstModelLabel" name="model" class="f-detail-item">
+          <ModelOutput ref="model" class="f-detail-item-content"></ModelOutput>
+        </el-tab-pane>
+        <el-tab-pane label="data" name="data" :lazy="true" class="f-detail-item">
+          <DataOutput ref="data" class="f-detail-item-content"></DataOutput>
+        </el-tab-pane>
+        <el-tab-pane label="log" name="log" :lazy="true" class="f-detail-item">
+          <LogOutput ref="log" class="f-detail-item-content"></LogOutput>
+        </el-tab-pane>
+      </el-tabs>
+    </section>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onBeforeMount, ref, watch } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import DataOutput from './DataOutput.vue';
 import LogOutput from './LogOutput.vue';
+import ModelOutput from './ModelOutput.vue';
+
+const emits = defineEmits(['refresh'])
 
 const display = ref(false);
 const fullscreen = ref(true);
@@ -69,48 +74,18 @@ const firstModelLabel = computed(() => {
   return name;
 });
 
-const componentInstance: any = ref(undefined);
-const update = ref(0);
-let unloaded = false;
-
-const modelComponent = () => {
-  componentInstance.value = undefined;
-  if (component.value) {
-    componentInstance.value = defineAsyncComponent(async () => {
-      const config = store.state.comp.hasLoaded[component.value];
-      if (config && config.instance) {
-        return config.instance.toVue();
-      } else {
-        unloaded = true;
-        return {};
-      }
-    });
-    update.value++;
-  }
-};
-
-watch(
-  () => store.state.comp.hasLoaded,
-  () => {
-    if (store.state.comp.hasLoaded[component.value] && unloaded) {
-      modelComponent();
-      unloaded = false;
-    }
-  },
-  { deep: true }
-);
-
-watch(
-  () => component.value,
-  () => {
-    modelComponent();
-  },
-  { deep: true }
-);
-
-onBeforeMount(() => {
-  modelComponent();
-});
+const model = ref()
+const data = ref()
+const log = ref()
+const refreshing = () => {
+  if (model.value)
+    model.value.refresh()
+  if (data.value)
+    data.value.refresh()
+  if (log.value)
+    log.value.refresh()
+  emits('refresh')
+}
 
 const on = () => {
   display.value = true;
@@ -134,6 +109,25 @@ defineExpose({
   position: relative;
   background-color: $default-bg;
 
+  .f-detail-container {
+    @include box-stretch();
+    position: relative;
+  }
+
+  .f-detail-operation {
+    position: absolute;
+    right: 0;
+    @include flex-row();
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 40px;
+    z-index: 10;
+  }
+  
+  .f-d-refresh {
+    margin-right: $pale;
+  }
+
   .el-dialog__body {
     height: calc(100% - 60px);
 
diff --git a/resources-front-end/packages/fate-board/src/views/history/filter/Filter.vue b/resources-front-end/packages/fate-board/src/views/history/filter/Filter.vue
index 75058a82..744eff52 100644
--- a/resources-front-end/packages/fate-board/src/views/history/filter/Filter.vue
+++ b/resources-front-end/packages/fate-board/src/views/history/filter/Filter.vue
@@ -10,7 +10,7 @@
         <el-input v-model="filter.job_id" size="small" clearable />
       </el-form-item>
       <el-form-item label="Role">
-        <el-select v-model="filter.role" size="small" placeholder="" clearable collapse-tags multiple>
+        <el-select v-model="filter.role" size="small" placeholder=" " clearable collapse-tags multiple>
           <el-option
             v-for="(item, index) in role"
             :key="index"
@@ -26,7 +26,7 @@
         <el-input v-model="filter.partner" size="small" clearable />
       </el-form-item>
       <el-form-item label="Status">
-        <el-select v-model="filter.status" size="small" placeholder="" clearable collapse-tags multiple>
+        <el-select v-model="filter.status" size="small" placeholder=" " clearable collapse-tags multiple>
           <el-option
             v-for="(item, index) in status"
             :key="index"
diff --git a/resources-front-end/packages/fate-board/src/views/running/Running.vue b/resources-front-end/packages/fate-board/src/views/running/Running.vue
index df75f748..b9f055bf 100644
--- a/resources-front-end/packages/fate-board/src/views/running/Running.vue
+++ b/resources-front-end/packages/fate-board/src/views/running/Running.vue
@@ -50,7 +50,7 @@ const dataRequest = async () => {
 let timeinterval;
 onBeforeMount(() => {
   dataRequest();
-  timeinterval = setTimeout(() => {
+  timeinterval = setInterval(() => {
     dataRequest();
   }, 5000);
 });
diff --git a/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/dataAsync.ts b/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/dataAsync.ts
index b0543e78..5ec1b6cb 100644
--- a/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/dataAsync.ts
+++ b/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/dataAsync.ts
@@ -238,4 +238,11 @@ export default class DataAsync<C extends object> extends Data<C> {
   after(cb: AfterInjectUpdate | AfterInjectUpdate[]): void {
     this.afterInject.push(...(<AfterInjectUpdate[]>toArray(cb)));
   }
+
+  release () {
+    this.beforeInject.length = 0
+    this.afterInject.length = 0
+    this.async = undefined
+    super.release();
+  }
 }
diff --git a/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/node.ts b/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/node.ts
index d64b9762..a5d85e7a 100644
--- a/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/node.ts
+++ b/resources-front-end/packages/fate-ui-component/lib/UIParse/AST/node.ts
@@ -74,4 +74,10 @@ export default class ASTNode<P extends object> extends Tree {
   after(cb: AfterInjectUpdate | AfterInjectUpdate[]): void {
     this.prop.after(<any>cb);
   }
+
+  release () {
+    this.tag = ''
+    this.prop.release()
+    this.event.release()
+  }
 }
diff --git a/resources-front-end/packages/fate-ui-component/lib/UIParse/nodeVue.ts b/resources-front-end/packages/fate-ui-component/lib/UIParse/nodeVue.ts
index a36a0d93..c3867970 100644
--- a/resources-front-end/packages/fate-ui-component/lib/UIParse/nodeVue.ts
+++ b/resources-front-end/packages/fate-ui-component/lib/UIParse/nodeVue.ts
@@ -76,4 +76,10 @@ export default class ASTNodeVue<P extends object> extends ASTNode<P> {
     });
     return this.VueCache;
   }
+
+  release () {
+    this.VueCache = undefined
+    this.StateSet = undefined
+    super.release()
+  }
 }
diff --git a/resources-front-end/packages/fate-ui-component/lib/UIParse/utils/Tree.ts b/resources-front-end/packages/fate-ui-component/lib/UIParse/utils/Tree.ts
index 93deecb5..fe765660 100644
--- a/resources-front-end/packages/fate-ui-component/lib/UIParse/utils/Tree.ts
+++ b/resources-front-end/packages/fate-ui-component/lib/UIParse/utils/Tree.ts
@@ -180,6 +180,17 @@ export default class TNode {
   findById(ID: string) {
     return TNode.FindById(this, ID);
   }
+
+  /** 节点释放 */
+  release() {
+    this.children.forEach((value) => {
+      if (!isString(value)) {
+        value.release()
+      }
+    })
+    this.children.clear()
+    this.setParentNode()
+  }
 }
 
 /***** 公用方法 *****/
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScroll.vue b/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScroll.vue
index 17d40c35..ee955946 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScroll.vue
+++ b/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScroll.vue
@@ -30,24 +30,6 @@
 </template>
 
 <script lang="ts" setup>
-/**
- *
- *  Copyright 2019 The FATE Authors. 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.
- *
- */
-
 import {
 computed,
 nextTick,
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScrollItem.vue b/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScrollItem.vue
index 3fe4ea6d..3dd6d8ac 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScrollItem.vue
+++ b/resources-front-end/packages/fate-ui-component/lib/components/VirtualScroll/VirtualScrollItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <component ref="container" :is="tag || 'div'">
+  <article ref="container">
     <slot name="default"></slot>
-  </component>
+  </article>
 </template>
 
 <script lang="ts" setup>
@@ -19,11 +19,9 @@ const $_pendingScrollUpdate = ref<any>('');
 interface Props {
   item: any,
   active: boolean,
-  index?: number | undefined,
   tag?: string
 }
 const props = withDefaults(defineProps<Props>(), {
-  index: undefined,
   tag: 'div',
 });
 const slots = defineSlots<{
diff --git a/resources-front-end/packages/fate-visualization/html/DAGGraphicApp.vue b/resources-front-end/packages/fate-visualization/html/DAGGraphicApp.vue
index bb08f5bb..56fef4ee 100644
--- a/resources-front-end/packages/fate-visualization/html/DAGGraphicApp.vue
+++ b/resources-front-end/packages/fate-visualization/html/DAGGraphicApp.vue
@@ -1,7 +1,7 @@
 <template>
   <button @click="change">change</button>
   <div class="app_container">
-    <DAGGraphic ref="dag" :data="demo" :operation="false" :mini="true" @choose="choose" @retry="retry" />
+    <DAGGraphic ref="dag" :data="demo" @choose="choose" @retry="retry" />
   </div>
 </template>
 
@@ -11,8 +11,13 @@ import DAGGraphic from '../lib/DAGGraphic/DAG.vue';
 
 const dag = ref();
 
-const demo = JSON.parse(
-  "{\"component_module\":{\"binning_1\":\"hetero_feature_binning\",\"binning_0\":\"hetero_feature_binning\",\"psi_0\":\"psi\"},\"component_stage\":{\"binning_1\":\"train\",\"binning_0\":\"predict\",\"psi_0\":\"default\"},\"component_list\":[{\"component_name\":\"binning_1\",\"status\":\"success\"},{\"component_name\":\"binning_0\",\"status\":\"running\",\"time\":1699479165189},{\"component_name\":\"psi_0\",\"time\":1699479165158,\"status\":\"failed\"}],\"component_need_run\":{\"binning_1\":true,\"binning_0\":true,\"psi_0\":true},\"dependencies\":{\"binning_1\":[{\"component_name\":\"binning_0\",\"model_type\":\"data\",\"up_output_info\":[\"train_output_data\"],\"type\":\"train_data\",\"data_source\":false}],\"binning_0\":[{\"component_name\":\"psi_0\",\"model_type\":\"data\",\"up_output_info\":[\"output_data\"],\"type\":\"train_data\",\"data_source\":false}],\"psi_0\":[{\"name_space\":\"experiment\",\"model_type\":\"data\",\"name\":\"breast_hetero_guest\",\"up_output_info\":[],\"type\":\"input_data\",\"data_source\":true}]}}");
+const demo = ref(JSON.parse(
+  "{\"component_module\":{\"binning_1\":\"hetero_feature_binning\",\"binning_0\":\"hetero_feature_binning\",\"psi_0\":\"psi\"},\"component_stage\":{\"binning_1\":\"train\",\"binning_0\":\"predict\",\"psi_0\":\"default\"},\"component_list\":[{\"component_name\":\"binning_1\",\"status\":\"success\"},{\"component_name\":\"binning_0\",\"status\":\"running\",\"time\":1699479165189},{\"component_name\":\"psi_0\",\"time\":1699479165158,\"status\":\"failed\"}],\"component_need_run\":{\"binning_1\":true,\"binning_0\":true,\"psi_0\":true},\"dependencies\":{\"binning_1\":[{\"component_name\":\"binning_0\",\"model_type\":\"data\",\"up_output_info\":[\"train_output_data\"],\"type\":\"train_data\",\"data_source\":false}],\"binning_0\":[{\"component_name\":\"psi_0\",\"model_type\":\"data\",\"up_output_info\":[\"output_data\"],\"type\":\"train_data\",\"data_source\":false}],\"psi_0\":[{\"name_space\":\"experiment\",\"model_type\":\"data\",\"name\":\"breast_hetero_guest\",\"up_output_info\":[],\"type\":\"input_data\",\"data_source\":true}]}}"))
+
+// const demoData = computed(() => {
+//   debugger
+//   return demo.value
+// })
 
 function choose(data: object) {
   console.log('choose component', data);
@@ -23,7 +28,7 @@ function retry(data: object) {
 }
 
 function change() {
-  dag.value.setStatus('homo_lr_0', 'fail');
+  demo.value.component_list[1].status = 'success'
 }
 </script>
 
diff --git a/resources-front-end/packages/fate-visualization/html/main.ts b/resources-front-end/packages/fate-visualization/html/main.ts
index 9a2a3845..f06f09e5 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 ff1bc14f..0304c048 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAG.vue
@@ -80,8 +80,8 @@ watch(
         DAGInstance.release()
         DAGCreator()
       } else {
-        for (const comp of (newValue?.component_lists || [])) {
-          DAGInstance.setStatus(comp.component_name, comp.status, (new Date().getTime() - comp.time || 0))
+        for (const comp of (newValue?.component_list || [])) {
+          DAGInstance.setStatus(comp.component_name, runningStatus(comp.status), (new Date().getTime() - comp.time || 0))
         }
       }
     }
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 ac360e4b..a391e1c9 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/DAGContainer.ts
@@ -366,7 +366,7 @@ export default class DAG {
 
   setStatus(name: string, status: string, duration: number) {
     const comp = this.component.get(name);
-    if (comp) {
+    if (comp && comp.prop.status !== status) {
       const tiktok = comp.find('tiktok');
       if (tiktok) {
         tiktok.setProp('duration', duration);
diff --git a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/component/configuration.ts b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/component/configuration.ts
index 85e02712..fbf3c0f5 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/component/configuration.ts
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/component/configuration.ts
@@ -25,6 +25,7 @@ export default {
 
       stagePredict: '#4159D1',
       stageTrain: '#73767a',
+      stageCross_validation: '#b88230',
 
       // rnutime status: unrun
       Unrun_Body: '#E8E8EF',
diff --git a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/runningStage.ts b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/runningStage.ts
index 58d36489..eef5ec9e 100644
--- a/resources-front-end/packages/fate-visualization/lib/DAGGraphic/runningStage.ts
+++ b/resources-front-end/packages/fate-visualization/lib/DAGGraphic/runningStage.ts
@@ -1,6 +1,7 @@
 enum CompStage {
   PREDICE = 'PREDICT',
   TRAIN = 'TRAIN',
+  CROSS_VALIDATION = 'CROSS_VALIDATION'
 }
 
 export default function runningStage(stage: string = '') {
@@ -8,7 +9,9 @@ export default function runningStage(stage: string = '') {
     return 'predict';
   } else if (stage.match(new RegExp(`(${CompStage.TRAIN})`, 'i'))) {
     return 'train';
+  } else if (stage.match(new RegExp(`(${CompStage.CROSS_VALIDATION})`, 'i'))) {
+    return 'cross_validation';
   } else {
-    return 'default';
+    return 'default'
   }
 }