feat: add dag into frontend (work in progress)

app/src/components/QuestMap.vue

@@ -18,70 +18,48 @@ import { use, init } from 'echarts/core'
 import { GraphChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TitleComponent, TooltipComponent } from 'echarts/components'
+import { DAG } from '@linux-odyssey/utils'
 
 const chartContainer = ref(null)
 let chartInstance = null
-const layers = [
-  [
-    {
-      name: 'helloworld',
-    },
-  ],
-  [
-    {
-      name: 'spell',
-    },
-  ],
-  [
-    {
-      name: 'read',
-    },
-    {
-      name: 'discover',
-    },
-  ],
-  [
-    {
-      name: 'remove',
-    },
-  ],
-]
-
-const edges = [
-  {
-    source: 'helloworld',
-    target: 'spell',
-  },
-  {
-    source: 'spell',
-    target: 'read',
-  },
-  {
-    source: 'spell',
-    target: 'discover',
-  },
-  {
-    source: 'read',
-    target: 'remove',
-  },
-  {
-    source: 'discover',
-    target: 'remove',
-  },
-]
-
-function toNodes(layers) {
-  return [
-    {
-      name: 'helloworld',
-      x: 100,
-      y: 100,
-    },
-  ]
-}
 
 use([GraphChart, CanvasRenderer, TitleComponent, TooltipComponent])
 
+const data = [
+  {
+    _id: 'discover',
+    title: 'Discover the World!',
+    requirements: ['spell'],
+  },
+  {
+    _id: 'read',
+    title: 'Read the File',
+    requirements: ['spell'],
+  },
+  {
+    _id: 'helloworld',
+    title: 'Hello, Linux World!',
+    requirements: [],
+  },
+  {
+    _id: 'spell',
+    title: 'Learn to spell',
+    requirements: ['helloworld'],
+  },
+]
+
+const dag = new DAG(data)
+const nodes = dag.getNodes().map((node) => ({
+  name: node._id,
+  x: 0,
+  y: 100 * node.layer,
+}))
+
+const edges = dag.getEdges().map((edge) => ({
+  source: edge[0],
+  target: edge[1],
+}))
+
 const option = {
   title: {
     text: 'Quest Map',
@@ -104,69 +82,9 @@ const option = {
       edgeLabel: {
         fontSize: 20,
       },
-      data: [
-        {
-          name: 'Node 1',
-          x: 300,
-          y: 300,
-        },
-        {
-          name: 'Node 2',
-          x: 800,
-          y: 300,
-        },
-        {
-          name: 'Node 3',
-          x: 550,
-          y: 100,
-        },
-        {
-          name: 'Node 4',
-          x: 550,
-          y: 500,
-        },
-      ],
+      data: nodes,
       // links: [],
-      links: [
-        {
-          source: 0,
-          target: 1,
-          symbolSize: [5, 20],
-          label: {
-            show: true,
-          },
-          lineStyle: {
-            width: 5,
-            curveness: 0.2,
-          },
-        },
-        {
-          source: 'Node 2',
-          target: 'Node 1',
-          label: {
-            show: true,
-          },
-          lineStyle: {
-            curveness: 0.2,
-          },
-        },
-        {
-          source: 'Node 1',
-          target: 'Node 3',
-        },
-        {
-          source: 'Node 2',
-          target: 'Node 3',
-        },
-        {
-          source: 'Node 2',
-          target: 'Node 4',
-        },
-        {
-          source: 'Node 1',
-          target: 'Node 4',
-        },
-      ],
+      links: edges,
       lineStyle: {
         opacity: 0.9,
         width: 2,
@@ -175,11 +93,12 @@ const option = {
     },
   ],
 }
-
 function initChart() {
   console.log('initChart', chartContainer.value)
   chartInstance = init(chartContainer.value)
   chartInstance.setOption(option)
+  console.log(dag.getNodes())
+  console.log(dag.getEdges())
 }
 
 onMounted(() => {