From c4208257699ff9f3919a1d6615f0812ba27c209f Mon Sep 17 00:00:00 2001
From: ChrisGray <yuxiaohui0626@gmail.com>
Date: Mon, 1 Jul 2024 20:38:21 +0800
Subject: [PATCH] - refactor(taskConfig) - refactor(store/task): rename from
 node - style(utils): jobLeafNode2G6Graph - style(utils): - style(utils):
 job2G6Tree

---
 src/G6/behaviorConfig.ts                      | 18 +++++----
 .../{nodeConfig => taskConfig}/index.less     |  0
 .../{nodeConfig => taskConfig}/index.vue      | 23 +++++------
 src/pages/Home/components/RightBox.vue        |  8 ++--
 src/store/job.ts                              |  4 +-
 src/store/node.ts                             | 36 -----------------
 src/store/task.ts                             | 35 +++++++++++++++++
 src/utils/graphUtil.ts                        | 39 ++++++++-----------
 8 files changed, 81 insertions(+), 82 deletions(-)
 rename src/components/{nodeConfig => taskConfig}/index.less (100%)
 rename src/components/{nodeConfig => taskConfig}/index.vue (72%)
 delete mode 100644 src/store/node.ts
 create mode 100644 src/store/task.ts

diff --git a/src/G6/behaviorConfig.ts b/src/G6/behaviorConfig.ts
index 0cffc74..c32a524 100644
--- a/src/G6/behaviorConfig.ts
+++ b/src/G6/behaviorConfig.ts
@@ -1,9 +1,9 @@
-import { IG6GraphEvent } from "@antv/g6-core/lib/types";
-import { BehaviorOption, INode, NodeConfig } from "@antv/g6";
-import { useNodeStore } from "@/store/node.ts";
+import {IG6GraphEvent} from "@antv/g6-core/lib/types";
+import {BehaviorOption} from "@antv/g6";
+import {useNodeStore} from "@/store/task.ts";
 import pinia from "@/store";
+import {Task} from "@/type.ts";
 
-const nodeStore = useNodeStore(pinia);
 
 export const activateNodeBehavior: BehaviorOption = {
   getEvents() {
@@ -12,8 +12,12 @@ export const activateNodeBehavior: BehaviorOption = {
     };
   },
   async onNodeClick(evt: IG6GraphEvent) {
-    const node = evt.item as INode;
-    console.log(node.getModel().id);
-    await nodeStore.updateData(node.getModel() as NodeConfig);
+    const node = evt.item!;
+    const task: Task = node.getModel().task as Task;
+    // Update the task config
+    const nodeStore = useNodeStore(pinia);
+    await nodeStore.updateData(task);
+    // Show the task config
+    nodeStore.show();
   },
 };
diff --git a/src/components/nodeConfig/index.less b/src/components/taskConfig/index.less
similarity index 100%
rename from src/components/nodeConfig/index.less
rename to src/components/taskConfig/index.less
diff --git a/src/components/nodeConfig/index.vue b/src/components/taskConfig/index.vue
similarity index 72%
rename from src/components/nodeConfig/index.vue
rename to src/components/taskConfig/index.vue
index aab2460..78ead38 100644
--- a/src/components/nodeConfig/index.vue
+++ b/src/components/taskConfig/index.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { Close } from "@element-plus/icons-vue";
-import { useNodeStore } from "@/store/node.ts";
-import { storeToRefs } from "pinia";
+import {Close} from "@element-plus/icons-vue";
+import {useNodeStore} from "@/store/task.ts";
+import {storeToRefs} from "pinia";
 
 const nodeStore = useNodeStore();
-const { activateNode } = storeToRefs(nodeStore);
+const {task} = storeToRefs(nodeStore);
 
 const onSave = () => {
   alert("save!");
 };
 const onCancel = () => {
-  nodeStore.setConfigDisplay();
+  nodeStore.close();
 };
 const onExecute = () => {
   alert("execute!");
 };
 </script>
 <template>
-  <el-card
+  <el-card v-if="nodeStore.isShowed"
     style="position: absolute; bottom: 120px; right: 30px; width: 500px"
     shadow="hover"
   >
@@ -25,20 +25,20 @@ const onExecute = () => {
       :icon="Close"
       text
       style="position: absolute; top: 15px; right: 15px"
-      @click="nodeStore.setConfigDisplay()"
+      @click="nodeStore.close()"
     />
 
-    <el-form :model="activateNode" label-position="top" style="margin: 20px">
+    <el-form label-position="top" style="margin: 20px">
       <el-descriptions direction="vertical" :column="1">
         <el-descriptions-item label="Tool name">
-          {{ activateNode.name }}
+          {{ task.tool.name }}
         </el-descriptions-item>
         <el-descriptions-item label="Tool description">
-          {{ activateNode.description }}
+          {{ task.tool.description }}
         </el-descriptions-item>
       </el-descriptions>
       <el-form-item label="Args">
-        <el-table :data="activateNode.args" style="width: 100%">
+        <el-table :data="task.tool.args" style="width: 100%">
           <el-table-column prop="name" label="Name" width="180" />
           <el-table-column prop="description" label="Description" width="180" />
         </el-table>
@@ -54,6 +54,7 @@ const onExecute = () => {
         </el-button>
       </el-form-item>
     </el-form>
+
   </el-card>
 </template>
 
diff --git a/src/pages/Home/components/RightBox.vue b/src/pages/Home/components/RightBox.vue
index a142189..8195da8 100644
--- a/src/pages/Home/components/RightBox.vue
+++ b/src/pages/Home/components/RightBox.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import WorkflowChart from "@/components/WorkflowChart.vue";
-import NodeConfig from "@/components/nodeConfig/index.vue";
-import { useNodeStore } from "@/store/node.ts";
-import { useSessionStore } from "@/store/session.ts";
+import NodeConfig from "@/components/taskConfig/index.vue";
+import {useNodeStore} from "@/store/task.ts";
+import {useSessionStore} from "@/store/session.ts";
 
 const nodeStore = useNodeStore();
 const sessionStore = useSessionStore();
@@ -14,7 +14,7 @@ const sessionStore = useSessionStore();
       v-if="sessionStore.graphShow"
       :graph-id="sessionStore.session.sessionId + '-workflow'"
     />
-    <NodeConfig v-show="nodeStore.configDisplay" />
+    <NodeConfig v-show="nodeStore.isShowed"/>
   </div>
 </template>
 
diff --git a/src/store/job.ts b/src/store/job.ts
index 02ed335..e59cc12 100644
--- a/src/store/job.ts
+++ b/src/store/job.ts
@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import {job2G6Tree, jobLeafNode2G6Graph} from "@/utils/graphUtil.ts";
+import {job2G6TreeGraph, jobLeafNode2G6Graph} from "@/utils/graphUtil.ts";
 import {computed} from "vue";
 import {fetchJob} from "@/api";
 import {Task} from "@/type.ts";
@@ -26,7 +26,7 @@ export const useJobStore = defineStore("job", () => {
     }
   }
 
-  const breakdownData = computed(() => job2G6Tree(_job));
+  const breakdownData = computed(() => job2G6TreeGraph(_job));
 
   const workflowData = computed(() => jobLeafNode2G6Graph(_job));
 
diff --git a/src/store/node.ts b/src/store/node.ts
deleted file mode 100644
index 3e73a6f..0000000
--- a/src/store/node.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineStore } from "pinia";
-import { reactive, ref } from "vue";
-import { Node } from "@/type.ts";
-import { NodeConfig } from "@antv/g6";
-import { fetchTool } from "@/api";
-
-export const useNodeStore = defineStore("node", () => {
-  const node = reactive<Node>({
-    id: "",
-    name: "",
-    description: "",
-    args: [],
-  });
-
-  let configDisplay = ref(false);
-
-  async function updateData(nodeConfig: NodeConfig) {
-    node.id = nodeConfig.id;
-    node.name = nodeConfig.label as string;
-    node.description = nodeConfig.description!;
-    // TODO fetchTool
-    // const res = await fetchTool(node.id).data;
-    const res = ((await fetchTool(node.id)) as { data: any }).data;
-    node.args = res.args;
-    configDisplay.value = true;
-  }
-  function setConfigDisplay() {
-    configDisplay.value = false;
-  }
-  return {
-    activateNode: node,
-    configDisplay,
-    updateData,
-    setConfigDisplay,
-  };
-});
diff --git a/src/store/task.ts b/src/store/task.ts
new file mode 100644
index 0000000..0987853
--- /dev/null
+++ b/src/store/task.ts
@@ -0,0 +1,35 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import {Task} from "@/type.ts";
+import {fetchTool} from "@/api";
+
+export const useNodeStore = defineStore("node", () => {
+
+    let _task = ref<Task>({} as Task);
+
+    let isShowed = ref(false);
+
+    async function updateData(task: Task) {
+        _task.value = task;
+        // TODO Fetch the tool
+        // const res = await fetchTool(node.tool.id).data;
+        const res = ((await fetchTool(_task.value.tool.id)) as { data: any }).data;
+        _task.value.tool.args = res.args;
+    }
+
+    function show() {
+        isShowed.value = true;
+    }
+
+    function close() {
+        isShowed.value = false;
+    }
+
+    return {
+        task: _task,
+        isShowed,
+        updateData,
+        show,
+        close,
+    };
+});
diff --git a/src/utils/graphUtil.ts b/src/utils/graphUtil.ts
index f8e2e9f..a41b198 100644
--- a/src/utils/graphUtil.ts
+++ b/src/utils/graphUtil.ts
@@ -4,18 +4,17 @@
  * @Date: 2024/6/7
  */
 import G6, {TreeGraphData} from "@antv/g6";
-import {GraphData} from "@antv/g6-core/lib/types";
+import {EdgeConfig, GraphData, NodeConfig} from "@antv/g6-core/lib/types";
 import {Task} from "@/type.ts";
 
-export function job2G6Tree(job: Task) {
+export function job2G6TreeGraph(job: Task) {
 
   function buildTreeNode(task: Task) {
     const {children} = task;
     const treeNode: TreeGraphData = {
       id: generateId(),
       label: task.name,
-      toolId: task.tool.id,
-      toolName: task.tool.name,
+      task: task,
       children: [] as TreeGraphData[],
     };
     if (children && children.length > 0) {
@@ -31,17 +30,16 @@ export function job2G6Tree(job: Task) {
 
 export function jobLeafNode2G6Graph(job: Task) {
   const leafNodes: GraphData = {
-    nodes: [],
-    edges: [],
+    nodes: [] as NodeConfig[],
+    edges: [] as EdgeConfig[],
   };
 
   function buildNode(task: Task) {
     const {children} = task;
-    const node = {
+    const node: NodeConfig = {
       id: generateId(),
       label: task.name,
-      toolId: task.tool.id,
-      toolName: task.tool.name,
+      task: task,
     };
     if (children && children.length > 0) {
       children.forEach((child) => {
@@ -51,21 +49,18 @@ export function jobLeafNode2G6Graph(job: Task) {
       leafNodes.nodes!.push(node);
     }
   }
-  function buildEdge(nodeData: GraphData) {
-    if (nodeData.nodes) {
-      for (let i = 1; i < nodeData.nodes.length; i++) {
-        leafNodes.edges!.push({
-          id: generateId(),
-          source: nodeData.nodes[i - 1].id,
-          target: nodeData.nodes[i].id,
-        });
-      }
-    }
-  }
 
   buildNode(job);
-  buildEdge(leafNodes);
-
+  // Build nodes
+  if (leafNodes.nodes) {
+    for (let i = 1; i < leafNodes.nodes.length; i++) {
+      leafNodes.edges!.push({
+        id: generateId(),
+        source: leafNodes.nodes[i - 1].id,
+        target: leafNodes.nodes[i].id,
+      });
+    }
+  }
   return leafNodes;
 }