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: [
+      data: nodes,
-        {
-          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,
-        },
-      ],
       // links: [],
-      links: [
+      links: edges,
-        {
-          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',
-        },
-      ],
       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(() => {

packages/utils/dag.js

@@ -2,6 +2,7 @@ export default class DAG {
   constructor(nodes) {
     this.nodes = new Map(nodes.map((node) => [node._id, node]))
     this.edges = new Set()
+    this.layers = []
     this.nodes.forEach((_, id) => {
       this.setLayer(id)
       this.addEdges(id)
@@ -12,6 +13,14 @@ export default class DAG {
     return this.nodes.get(id)
   }
 
+  getNodes() {
+    return Array.from(this.nodes.values())
+  }
+
+  getEdges() {
+    return Array.from(this.edges.values())
+  }
+
   setLayer(id) {
     console.log(`setLayer(${id})`)
     const node = this.nodes.get(id)
@@ -23,6 +32,12 @@ export default class DAG {
     }
     const previousLayer = node.requirements.map((rId) => this.setLayer(rId))
     node.layer = Math.max(...previousLayer, 0) + 1
+    if (this.layers.length < node.layer) {
+      this.layer.push(1)
+    } else {
+      this.layers[node.layer - 1] += 1
+    }
+    node.count = this.layers[node.layer - 1]
     return node.layer
   }
 

packages/utils/index.js

@@ -1,2 +1,3 @@
 export { isValidEmail, isValidUsername } from './auth.js'
 export { buildFileCheckCmd } from './commands.js'
+export { default as DAG } from './dag.js'