chore: rename

src/G6/behaviorConfig.ts

@@ -1,9 +1,8 @@
-import {IG6GraphEvent} from "@antv/g6-core/lib/types";
-import {BehaviorOption} from "@antv/g6";
-import {useNodeStore} from "@/store/task.ts";
+import { IG6GraphEvent } from "@antv/g6-core/lib/types";
+import { BehaviorOption } from "@antv/g6";
+import { useTaskStore } from "@/store/task.ts";
 import pinia from "@/store";
-import {Task} from "@/type.ts";
-
+import { Task } from "@/type.ts";
 
 export const activateNodeBehavior: BehaviorOption = {
   getEvents() {
@@ -15,9 +14,9 @@ export const activateNodeBehavior: BehaviorOption = {
     const node = evt.item!;
     const task: Task = node.getModel().task as Task;
     // Update the task config
-    const nodeStore = useNodeStore(pinia);
-    await nodeStore.updateData(task);
+    const taskStore = useTaskStore(pinia);
+    await taskStore.updateData(task);
     // Show the task config
-    nodeStore.show();
+    taskStore.show();
   },
 };

src/G6/nodeConfig.ts

@@ -1,6 +1,7 @@
 import { ShapeOptions } from "@antv/g6";
 
 import { textWrapping } from "@/utils/graphUtil.ts";
+import { Task } from "@/type.ts";
 
 /**
  * @Description: G6 Node Style
@@ -175,7 +176,7 @@ export const workflowNode: ShapeOptions = {
     });
     group.addShape("text", {
       attrs: {
-        text: cfg.toolName,
+        text: (cfg.task as Task).tool.name,
         fill: "#000",
         x: size * 1.5,
         y: size / 2,

src/api/mock.ts

@@ -4,7 +4,7 @@
  * @Date: 2024/6/19
  */
 
-import {MOCK_JOB, MOCK_TOOL} from "@/constant";
+import { MOCK_JOB, MOCK_TOOL } from "@/constant";
 
 export const fetchJob = (task: string) =>
   new Promise((resolve, _reject) => {
@@ -18,11 +18,22 @@ export const fetchJob = (task: string) =>
             ),
           ),
         }),
-      1000,
+      100,
     );
   });
 
 export const fetchTool = (_toolId: string) =>
   new Promise((resolve, _reject) => {
-    setTimeout(() => resolve({ data: JSON.parse(MOCK_TOOL) }), 1000);
+    setTimeout(
+      () =>
+        resolve({
+          data: JSON.parse(
+            MOCK_TOOL.replace(/Basic_statistics_for_fields/, _toolId).replace(
+              /qgis:basicstatisticsforfields/,
+              _toolId,
+            ),
+          ),
+        }),
+      100,
+    );
   });

src/components/BreakdownChart.vue

@@ -24,7 +24,10 @@ onMounted(() => {
       indent: 50,
     },
     modes: {
-      default: ["activate-node", "drag-canvas"],
+      default: [
+        // "activate-node",
+        "drag-canvas",
+      ],
     },
     defaultNode: {
       type: "breakdownNode",
@@ -36,7 +39,7 @@ onMounted(() => {
 
   tree.data(jobStore.breakdownData);
   tree.render();
-  tree.fitView();
+  tree.fitCenter();
 });
 </script>
 

src/components/WorkflowChart.vue

@@ -22,7 +22,7 @@ onMounted(() => {
   console.log("workflow");
   const graph = new G6.Graph({
     container: getGraphNum(),
-    fitView: true,
+    fitCenter: true,
     layout: {
       type: "dagre",
       ranksep: 12,

src/components/taskConfig/index.vue

@@ -1,63 +1,68 @@
 <script setup lang="ts">
-import {Close} from "@element-plus/icons-vue";
-import {useNodeStore} from "@/store/task.ts";
-import {storeToRefs} from "pinia";
+import { Close } from "@element-plus/icons-vue";
+import { useTaskStore } from "@/store/task.ts";
+import { storeToRefs } from "pinia";
 
-const nodeStore = useNodeStore();
-const {task} = storeToRefs(nodeStore);
+const taskStore = useTaskStore();
+const { tool } = storeToRefs(taskStore);
 
-const onSave = () => {
-  alert("save!");
-};
 const onCancel = () => {
-  nodeStore.close();
+  taskStore.close();
 };
 const onExecute = () => {
   alert("execute!");
 };
+
+// console.log(argCfg.value);
 </script>
 <template>
-  <el-card v-if="nodeStore.isShowed"
+  <el-card
+    v-if="taskStore.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.close()"
+      @click="taskStore.close()"
     />
 
     <el-form label-position="top" style="margin: 20px">
       <el-descriptions direction="vertical" :column="1">
         <el-descriptions-item label="Tool name">
-          {{ task.tool.name }}
+          {{ tool.id + "  " + tool.name }}
         </el-descriptions-item>
         <el-descriptions-item label="Tool description">
-          {{ task.tool.description }}
+          {{ tool.description }}
         </el-descriptions-item>
       </el-descriptions>
       <el-form-item label="Args">
-        <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 :data="tool.args" header-cell-class-name="header-cell-class">
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="description" label="Description" />
+          <el-table-column :prop="' '" label="Input" />
         </el-table>
       </el-form-item>
+      <el-descriptions direction="vertical" :column="1">
+        <el-descriptions-item label="Result">
+          {{ "resutl" }}
+        </el-descriptions-item>
+      </el-descriptions>
       <el-form-item>
-        <el-button @click="onSave">Save</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-        <el-button
-          style="position: absolute; right: 0"
-          type="primary"
-          @click="onExecute"
-          >Execute
-        </el-button>
+        <div style="width: 100%; display: flex; justify-content: space-between">
+          <el-button @click="onCancel">Cancel</el-button>
+          <el-button type="primary" @click="onExecute">Execute </el-button>
+        </div>
       </el-form-item>
     </el-form>
-
   </el-card>
 </template>
 
 <style scoped lang="less">
 @import "./index.less";
+.header-cell-class {
+  background-color: aqua;
+  border-color: aqua;
+}
 </style>

src/pages/Home/components/RightBox.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import WorkflowChart from "@/components/WorkflowChart.vue";
 import NodeConfig from "@/components/taskConfig/index.vue";
-import {useNodeStore} from "@/store/task.ts";
-import {useSessionStore} from "@/store/session.ts";
+import { useTaskStore } from "@/store/task.ts";
+import { useSessionStore } from "@/store/session.ts";
 
-const nodeStore = useNodeStore();
+const taskStore = useTaskStore();
 const sessionStore = useSessionStore();
 </script>
 
@@ -14,7 +14,7 @@ const sessionStore = useSessionStore();
       v-if="sessionStore.graphShow"
       :graph-id="sessionStore.session.sessionId + '-workflow'"
     />
-    <NodeConfig v-show="nodeStore.isShowed"/>
+    <NodeConfig v-if="taskStore.isShowed" />
   </div>
 </template>
 

src/pages/Home/index.vue

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

src/store/task.ts

@@ -1,35 +1,39 @@
-import {defineStore} from "pinia";
-import {ref} from "vue";
-import {Task} from "@/type.ts";
-import {fetchTool} from "@/api";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import { Task } from "@/type.ts";
+import { fetchTool } from "@/api";
 
-export const useNodeStore = defineStore("node", () => {
+export const useTaskStore = defineStore("node", () => {
+  let _task = ref<Task>({} as Task);
 
-    let _task = ref<Task>({} as Task);
+  const tool = computed(() => _task.value.tool);
 
-    let isShowed = ref(false);
+  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;
-    }
+  async function updateData(task: Task) {
+    _task.value = task;
+    // TODO Fetch the tool
+    // const res = await fetchTool(node.tool.id).data;
+    _task.value.tool = (
+      (await fetchTool(_task.value.tool.id)) as { data: any }
+    ).data;
+    console.log(_task.value);
+  }
 
-    function show() {
-        isShowed.value = true;
-    }
+  function show() {
+    isShowed.value = true;
+  }
 
-    function close() {
-        isShowed.value = false;
-    }
+  function close() {
+    isShowed.value = false;
+  }
 
-    return {
-        task: _task,
-        isShowed,
-        updateData,
-        show,
-        close,
-    };
+  return {
+    task: _task,
+    isShowed,
+    updateData,
+    show,
+    close,
+    tool,
+  };
 });