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 <[email protected]>

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 {

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) {

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,25 +46,25 @@ 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)
           }
         } else if (data.status.match(/running|waiting/)) {
           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;

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 = []

resources-front-end/packages/fate-board/src/transform/metric/loss.ts

@@ -8,30 +8,46 @@ 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 {
     id: 'LOSS',
     tag: FLine,
     prop: {
       title: 'Loss',
-      data: configuration
+      data: configuration,
+      legend: 1
     }
   }
 }

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)
   }

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
 }

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;

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 || {}),
   };
 }

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(

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
 }