- refactor(taskConfig)

- refactor(store/task): rename from node
- style(utils): jobLeafNode2G6Graph
- style(utils): - style(utils): job2G6Tree

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

src/components/nodeConfig/index.vue → src/components/taskConfig/index.vue

@@ -1,44 +1,44 @@
 <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"
   >
     <el-button
       :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>
 

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>
 

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

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

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