examples: add example for running a process tree

Author: bcakmakoglu

examples/vite/src/Layouting/LayoutingExample.vue

@@ -1,57 +1,79 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Panel, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import '@vue-flow/controls/dist/style.css'
 
-import initialElements from './initial-elements'
+import { initialEdges, initialNodes } from './initial-elements'
+import { useRunProcess } from './useRunProcess'
+import ProcessNode from './ProcessNode.vue'
 
-const dagreGraph = new dagre.graphlib.Graph()
+const nodes = ref(initialNodes)
 
-dagreGraph.setDefaultEdgeLabel(() => ({}))
+const edges = ref(initialEdges)
 
-const nodeExtent: CoordinateExtent = [
-  [0, -100],
-  [1000, 500],
-]
+// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+const dagreGraph = ref(new dagre.graphlib.Graph())
 
-const elements = ref<Elements>(initialElements)
+dagreGraph.value.setDefaultEdgeLabel(() => ({}))
+
+const { run } = useRunProcess()
+
+const { findNode, fitView } = useVueFlow()
+
+function handleLayout(direction: 'TB' | 'LR') {
+  dagreGraph.value = new dagre.graphlib.Graph()
+  dagreGraph.value.setDefaultEdgeLabel(() => ({}))
 
-function onLayout(direction: string) {
   const isHorizontal = direction === 'LR'
-  dagreGraph.setGraph({ rankdir: direction })
+  dagreGraph.value.setGraph({ rankdir: direction })
 
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      dagreGraph.setNode(el.id, { width: 150, height: 50 })
-    } else {
-      dagreGraph.setEdge(el.source, el.target)
-    }
-  })
+  for (const node of nodes.value) {
+    // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+    const graphNode = findNode(node.id)!
+
+    dagreGraph.value.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+  }
 
-  dagre.layout(dagreGraph)
+  for (const edge of edges.value) {
+    dagreGraph.value.setEdge(edge.source, edge.target)
+  }
 
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      const nodeWithPosition = dagreGraph.node(el.id)
-      el.targetPosition = isHorizontal ? Position.Left : Position.Top
-      el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
-      el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
+  dagre.layout(dagreGraph.value)
+
+  // set nodes with updated positions
+  nodes.value = nodes.value.map((node) => {
+    const nodeWithPosition = dagreGraph.value.node(node.id)
+
+    return {
+      ...node,
+      targetPosition: isHorizontal ? Position.Left : Position.Top,
+      sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+      position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
     }
   })
+
+  nextTick(() => {
+    fitView()
+  })
 }
 </script>
 
 <template>
   <div class="layoutflow">
-    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
+    <VueFlow :nodes="nodes" :edges="edges" :connection-mode="ConnectionMode.Loose" @nodes-initialized="handleLayout('TB')">
+      <template #node-process="props">
+        <ProcessNode v-bind="props" />
+      </template>
+
       <Controls />
 
       <Panel style="display: flex; gap: 10px" position="top-right">
-        <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
-        <button @click="onLayout('LR')">horizontal layout</button>
+        <button @click="handleLayout('TB')">vertical layout</button>
+        <button @click="handleLayout('LR')">horizontal layout</button>
+
+        <button @click="run(nodes, dagreGraph)">Run</button>
       </Panel>
     </VueFlow>
   </div>

examples/vite/src/Layouting/ProcessNode.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { NodeProps } from '@vue-flow/core'
+import { Handle } from '@vue-flow/core'
+
+const props = defineProps<NodeProps>()
+
+const bgColor = toRef(() => {
+  if (props.data.hasError) {
+    return '#f87171'
+  }
+
+  if (props.data.isFinished) {
+    return '#10b981'
+  }
+
+  if (props.data.isRunning || props.data.isSkipped) {
+    return '#6b7280'
+  }
+
+  return '#1a192b'
+})
+</script>
+
+<template>
+  <div class="process-node" :style="{ backgroundColor: bgColor }">
+    <Handle type="target" :position="targetPosition" />
+    <Handle type="source" :position="sourcePosition" />
+
+    <div style="display: flex; align-items: center; gap: 8px">
+      <div v-if="data.isRunning" class="spinner" />
+      <span v-else-if="data.hasError">&#x274C;</span>
+      <span v-else-if="data.isSkipped">&#x1F6A7;</span>
+      <span v-else>&#x1F4E6;</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.process-node {
+  padding: 10px;
+  color: white;
+  border: 1px solid #1a192b;
+  border-radius: 99px;
+  font-size: 10px;
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #3498db;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

examples/vite/src/Layouting/initial-elements.ts

@@ -1,71 +1,75 @@
-import type { Elements, XYPosition } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
 
-const position: XYPosition = { x: 0, y: 0 }
+const position = { x: 0, y: 0 }
+const type: string = 'process'
 
-const elements: Elements = [
+export const initialNodes: Node[] = [
   {
     id: '1',
-    type: 'input',
-    label: 'input',
+    label: 'Start',
     position,
+    type,
   },
   {
     id: '2',
-    label: 'node 2',
     position,
+    type,
   },
   {
     id: '2a',
-    label: 'node 2a',
     position,
+    type,
   },
   {
     id: '2b',
-    label: 'node 2b',
     position,
+    type,
   },
   {
     id: '2c',
-    label: 'node 2c',
     position,
+    type,
   },
   {
     id: '2d',
-    label: 'node 2d',
     position,
+    type,
   },
   {
     id: '3',
-    label: 'node 3',
     position,
+    type,
   },
   {
     id: '4',
-    label: 'node 4',
     position,
+    type,
   },
   {
     id: '5',
-    label: 'node 5',
     position,
+    type,
   },
   {
     id: '6',
-    type: 'output',
-    label: 'output',
     position,
+    type,
+  },
+  {
+    id: '7',
+    position,
+    type,
   },
-  { id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
-  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
-  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
-  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
-  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
-  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
-  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
-
-  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
-  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
-  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
 ]
 
-export default elements
+export const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e1-3', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e2-2b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e2-2c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c-2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+  { id: 'e4-5', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e5-7', source: '5', target: '7', type: 'smoothstep', animated: true },
+]

examples/vite/src/Layouting/useRunProcess.ts

@@ -0,0 +1,88 @@
+import type { Node } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+
+/**
+ * Composable to simulate running a process tree.
+ *
+ * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
+ * When one node finishes, the next one starts.
+ *
+ * When a node has multiple descendants, it will run them in parallel.
+ */
+export function useRunProcess() {
+  const { updateNodeData } = useVueFlow()
+
+  const running = ref(false)
+  const executedNodes = new Set<string>()
+
+  async function runNode(node: { id: string }, dagreGraph: dagre.graphlib.Graph) {
+    if (executedNodes.has(node.id)) {
+      return
+    }
+
+    executedNodes.add(node.id)
+
+    updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false })
+
+    // Simulate an async process with a random timeout between 1 and 3 seconds
+    const delay = Math.floor(Math.random() * 2000) + 1000
+    await new Promise((resolve) => setTimeout(resolve, delay))
+
+    const children = dagreGraph.successors(node.id) as unknown as string[]
+
+    // Randomly decide whether the node will throw an error
+    const willThrowError = Math.random() < 0.15
+
+    if (willThrowError) {
+      updateNodeData(node.id, { isRunning: false, hasError: true })
+
+      await skipDescendants(node.id, dagreGraph)
+      return
+    }
+
+    updateNodeData(node.id, { isRunning: false, isFinished: true })
+
+    // Run the process on the children in parallel
+    await Promise.all(
+      children.map((id) => {
+        return runNode({ id }, dagreGraph)
+      }),
+    )
+  }
+
+  async function run(nodes: Node[], dagreGraph: dagre.graphlib.Graph) {
+    if (running.value) {
+      return
+    }
+
+    reset(nodes)
+
+    running.value = true
+
+    // Get all starting nodes (nodes with no predecessors)
+    const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0)
+
+    // Run the process on all starting nodes in parallel
+    await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph)))
+
+    running.value = false
+    executedNodes.clear()
+  }
+
+  function reset(nodes: Node[]) {
+    for (const node of nodes) {
+      updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false })
+    }
+  }
+
+  async function skipDescendants(nodeId: string, dagreGraph: dagre.graphlib.Graph) {
+    const children = dagreGraph.successors(nodeId) as unknown as string[]
+
+    for (const child of children) {
+      updateNodeData(child, { isRunning: false, isSkipped: true })
+      await skipDescendants(child, dagreGraph)
+    }
+  }
+
+  return { run, running }
+}