- refactor(job): from data

src/components/BreakdownChart.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import G6 from "@antv/g6";
-import { onMounted } from "vue";
-import { useDataStore } from "@/store/data.ts";
+import {onMounted} from "vue";
+import {useJobStore} from "@/store/job.ts";
 
 const props = defineProps<{
   graphId: string;
 }>();
 
-const dataStore = useDataStore();
+const dataStore = useJobStore();
 
 const getGraphNum = function () {
   return "mountNode-" + props.graphId;
@@ -34,7 +34,7 @@ onMounted(() => {
     },
   });
 
-  tree.data(dataStore.getTreeData);
+  tree.data(dataStore.breakdownData);
   tree.render();
   tree.fitView(50);
 });

src/components/WorkflowChart.vue

@@ -4,15 +4,15 @@
     @Date: 2024/6/7
 -->
 <script setup lang="ts">
-import { onMounted } from "vue";
+import {onMounted} from "vue";
 import G6 from "@antv/g6";
-import { useDataStore } from "@/store/data.ts";
+import {useJobStore} from "@/store/job.ts";
 
 const props = defineProps<{
   graphId: string;
 }>();
 
-const dataStore = useDataStore();
+const dataStore = useJobStore();
 
 const getGraphNum = function () {
   return "mountNode-" + props.graphId;
@@ -39,7 +39,7 @@ onMounted(() => {
     },
   });
 
-  graph.data(dataStore.getGraphData);
+  graph.data(dataStore.workflowData);
   graph.render();
 
   const group = graph.get("edgeGroup");

src/store/job.ts

@@ -0,0 +1,43 @@
+import {defineStore} from "pinia";
+import {job2G6Tree, jobLeafNode2G6Graph} from "@/utils/graphUtil.ts";
+import {computed} from "vue";
+import {mockFetchJob} from "@/api/fetch.ts";
+import {Task} from "@/type.ts";
+// import axios from "@/api";
+
+export const useJobStore = defineStore("job", () => {
+    let _job;
+
+    async function fetchData(task: string) {
+        const res = ((await mockFetchJob(task)) as { data: any }).data;
+        // localData = (await axios.fetchJob(`{"task":"${task}"}`)).data;
+        console.debug("res", res);
+        _job = convertData(res);
+
+        function convertData(data: any) {
+            const children = data.subtasks;
+            const task = new Task(data.task, data.toolId, data.toolName);
+
+            if (children && children.length > 0) {
+                for (let i = 0; i < children.length; i++) {
+                    task.addChild(convertData(children[i]));
+                }
+            }
+            return task;
+        }
+    }
+
+    const breakdownData = computed(() => job2G6Tree(_job));
+
+    const workflowData = computed(() => jobLeafNode2G6Graph(_job));
+
+    const job = computed(() => {
+        if (!_job) {
+            return new Task();
+        } else {
+            return _job;
+        }
+    })
+
+    return {fetchData, job, breakdownData, workflowData};
+});

src/store/session.ts

@@ -1,7 +1,7 @@
-import { defineStore } from "pinia";
-import { reactive, ref } from "vue";
-import { generateId } from "@/utils/graphUtil";
-import { useDataStore } from "@/store/data.ts";
+import {defineStore} from "pinia";
+import {reactive, ref} from "vue";
+import {generateId} from "@/utils/graphUtil";
+import {useJobStore} from "@/store/job.ts";
 
 type Session = {
   sessionId: string;
@@ -10,7 +10,7 @@ type Session = {
 };
 
 export const useSessionStore = defineStore("session", () => {
-  const dataStore = useDataStore();
+  const dataStore = useJobStore();
 
   const session = reactive<Session>({
     sessionId: generateId(),
@@ -20,8 +20,8 @@ export const useSessionStore = defineStore("session", () => {
   const graphShow = ref(false);
 
   async function chatted() {
-    if (!dataStore.localData.task) {
-      await dataStore.getData(session.question);
+    if (!dataStore.job.name) {
+      await dataStore.fetchData(session.question);
     }
     // session.question = "";
     graphShow.value = true;

src/type.ts

@@ -1,20 +1,39 @@
-export type Task = {
-  task: string;
-  toolId: string;
-  toolName: string;
-  subtasks: Task[];
-};
+export class Task {
+  name: string;
+  tool: Tool;
+  children: Task[];
+
+  constructor(task: string, toolId: string, toolName: string) {
+    this.name = task;
+    this.initTool(toolId, toolName);
+    this.children = [] as Task[];
+  }
+
+  initTool(toolId: string, toolName: string) {
+    this.tool = new Tool(toolId, toolName);
+  }
+
+  addChild(task: Task) {
+    this.children.push(task);
+  }
+}
+
+export class Tool {
+  id: string;
+  name: string;
+  description: string;
+  args: {
+    name: string;
+    type: string;
+    description: string;
+  }[];
+
+  constructor(id: string, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+}
 
-// export type Tool = {
-//   id: string;
-//   name: string;
-//   description: string;
-//   args: {
-//     name: string;
-//     type: string;
-//     description: string;
-//   }[];
-// };
 export type Node = {
   id: string;
   name: string;

src/utils/graphUtil.ts

@@ -3,80 +3,70 @@
  * @Author: Chris
  * @Date: 2024/6/7
  */
-import G6, { TreeGraphData } from "@antv/g6";
-import { GraphData } from "@antv/g6-core/lib/types";
-import { Task } from "@/type.ts";
+import G6, {TreeGraphData} from "@antv/g6";
+import {GraphData} from "@antv/g6-core/lib/types";
+import {Task} from "@/type.ts";
 
-// export type Tool = {
-//   id: string;
-//   name: string;
-//   description: string;
-//   args: {
-//     name: string;
-//     type: string;
-//     description: string;
-//   }[];
-// };
-// type TreeNode = {
-//   label: string;
-//   toolId: string;
-//   toolName: string;
-//   children: TreeNode[];
-// };
+export function job2G6Tree(job: Task) {
 
-export function jobData2Tree(data: Task) {
-  const { subtasks } = data;
-  const graphData: TreeGraphData = {
-    id: generateId(),
-    label: data.task,
-    toolId: data.toolId,
-    toolName: data.toolName,
-    children: [],
-  };
-  if (subtasks && subtasks.length > 0) {
-    for (let i = 0; i < subtasks.length; i++) {
-      graphData.children!.push(jobData2Tree(subtasks[i]));
+  function buildTreeNode(task: Task) {
+    const {children} = task;
+    const treeNode: TreeGraphData = {
+      id: generateId(),
+      label: task.name,
+      toolId: task.tool.id,
+      toolName: task.tool.name,
+      children: [] as TreeGraphData[],
+    };
+    if (children && children.length > 0) {
+      for (let i = 0; i < children.length; i++) {
+        treeNode.children!.push(buildTreeNode(children[i]));
+      }
     }
+    return treeNode;
   }
-  return graphData;
+
+  return buildTreeNode(job);
 }
 
-export function tree2Graph(treeData: TreeGraphData) {
-  const finalTaskList: GraphData = {
+export function jobLeafNode2G6Graph(job: Task) {
+  const leafNodes: GraphData = {
     nodes: [],
     edges: [],
   };
-  function buildNode(nodes: TreeGraphData) {
-    const { id, label, toolId, toolName, children } = nodes;
+
+  function buildNode(task: Task) {
+    const {children} = task;
     const node = {
-      id,
-      label,
-      toolId,
-      toolName,
+      id: generateId(),
+      label: task.name,
+      toolId: task.tool.id,
+      toolName: task.tool.name,
     };
     if (children && children.length > 0) {
       children.forEach((child) => {
         buildNode(child);
       });
     } else {
-      finalTaskList.nodes!.push(node);
+      leafNodes.nodes!.push(node);
     }
   }
   function buildEdge(nodeData: GraphData) {
     if (nodeData.nodes) {
       for (let i = 1; i < nodeData.nodes.length; i++) {
-        finalTaskList.edges!.push({
+        leafNodes.edges!.push({
           id: generateId(),
           source: nodeData.nodes[i - 1].id,
           target: nodeData.nodes[i].id,
         });
       }
     }
   }
-  buildNode(treeData);
-  buildEdge(finalTaskList);
 
-  return finalTaskList;
+  buildNode(job);
+  buildEdge(leafNodes);
+
+  return leafNodes;
 }
 
 /**