bug(behaviorConfig)

Author: martsimq

src/G6/behaviorConfig.ts

@@ -1,6 +1,6 @@
-import {IG6GraphEvent} from "@antv/g6-core/lib/types";
-import {BehaviorOption} from "@antv/g6";
-import {useNodeStore} from "@/store/node.ts";
+import { IG6GraphEvent } from "@antv/g6-core/lib/types";
+import { BehaviorOption, INode, NodeConfig } from "@antv/g6";
+import { useNodeStore } from "@/store/node.ts";
 import pinia from "@/store";
 
 const nodeStore = useNodeStore(pinia);
@@ -12,8 +12,8 @@ export const activateNodeBehavior: BehaviorOption = {
     };
   },
   async onNodeClick(evt: IG6GraphEvent) {
-    const node = evt.item!;
+    const node = evt.item as INode;
     console.log(node.getModel().id);
-    await nodeStore.updateData(node.getModel())
+    await nodeStore.updateData(node.getModel() as NodeConfig);
   },
 };

src/components/BreakdownChart.vue

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

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 {useJobStore} from "@/store/job.ts";
+import { useJobStore } from "@/store/job.ts";
 
 const props = defineProps<{
   graphId: string;
 }>();
 
-const dataStore = useJobStore();
+const jobStore = useJobStore();
 
 const getGraphNum = function () {
   return "mountNode-" + props.graphId;
@@ -23,7 +23,6 @@ onMounted(() => {
   const graph = new G6.Graph({
     container: getGraphNum(),
     fitView: true,
-    fitViewPadding: 100,
     layout: {
       type: "dagre",
       ranksep: 12,
@@ -39,7 +38,7 @@ onMounted(() => {
     },
   });
 
-  graph.data(dataStore.workflowData);
+  graph.data(jobStore.workflowData);
   graph.render();
 
   const group = graph.get("edgeGroup");

src/pages/Home/index.vue

@@ -12,7 +12,7 @@ import Question from "@/components/Question.vue";
         <TopBox />
       </el-header>
       <el-container>
-        <el-aside width="30%">
+        <el-aside width="50%">
           <LeftBox />
         </el-aside>
         <el-main>

src/store/node.ts

@@ -1,8 +1,8 @@
-import {defineStore} from "pinia";
-import {reactive, ref} from "vue";
-import {Node} from "@/type.ts";
-import {NodeConfig} from "@antv/g6";
-import {fetchTool} from "@/api";
+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>({
@@ -16,11 +16,11 @@ export const useNodeStore = defineStore("node", () => {
 
   async function updateData(nodeConfig: NodeConfig) {
     node.id = nodeConfig.id;
-    node.name = nodeConfig.label;
-    node.description = nodeConfig.description;
+    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;
+    const res = ((await fetchTool(node.id)) as { data: any }).data;
     node.args = res.args;
     configDisplay.value = true;
   }

src/store/session.ts

@@ -1,7 +1,7 @@
-import {defineStore} from "pinia";
-import {reactive, ref} from "vue";
-import {generateId} from "@/utils/graphUtil";
-import {useJobStore} from "@/store/job.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;
@@ -25,5 +25,5 @@ export const useSessionStore = defineStore("session", () => {
     graphShow.value = true;
   }
 
-  return {session, graphShow, chatted};
+  return { session, graphShow, chatted };
 });